Angular 2/4/5 - 将子组件加载到主路由器插座 [英] Angular 2/4/5 - Load child component to main router-outlet

问题描述

我目前正在使用角度5。我遇到了路由器配置问题及其相应的组件内容表示。以下是我的路由器配置。

I am working with angular 5 currently. I have came across the problem with my router configuration and its presentation of component content accordingly. As below is my router configuration.

  const appRoutes: Routes = [
    { path: "", pathMatch: "full", redirectTo: "home" },
    {
      path: "home", component: HomeComponent
    },
    {
      path: "applications", component: ApplicationsComponent,
      children: [{
        path: ":applicationId/privacysettingsforapplications", component: PrivacysettingsforapplicationsComponent,
        children: [
          { path: "", pathMatch: "full", redirectTo: "services" },
          {
            path: "services", component: PrivacysettingsforapplicationservicesComponent
          },
          {
            path: "data", component: PrivacysettingsforapplicationdataComponent
          }]
      }]
    },
    {
      path: "devices", component: DevicesComponent,
    },
  ];

我们有一个主< router-outlet>< / router- outlet> 其中angular加载其父组件的所有内容。这里 ApplicationsComponent 有一个孩子 PrivacysettingsforapplicationsComponent 又有两个孩子（ PrivacysettingsforapplicationservicesComponent和PrivacysettingsforapplicationdataComponent ie：服务和数据）。

We have one main <router-outlet></router-outlet> in which angular loads all content of its parent component. Here ApplicationsComponent has one children PrivacysettingsforapplicationsComponent which in turn has two children(PrivacysettingsforapplicationservicesComponent and PrivacysettingsforapplicationdataComponent ie: service and data).

我想检查是否有任何加载方式（ PrivacysettingsforapplicationsComponent ）主要< router-outlet> 上的孩子，而不是其直接父母< router-outlet> 即。 ApplicationComponent 的。我检查过的一种方法是将子组件作为对等组件放入父组件，但我的breadcrumb模块不能识别该组件的真正父组件 PrivacysettingsforapplicationsComponent 。

I want to check that is there any way to load(PrivacysettingsforapplicationsComponent) children on main <router-outlet> instead of its immediate parent <router-outlet> ie. ApplicationComponent's. One way I have checked is to put child component as peer to parent component but then my breadcrumb module does not identify who is the real parent of that component PrivacysettingsforapplicationsComponent.

推荐答案

路径：applications /：applicationId / privacysettingsforapplications

将此替换为以下路径

路径：：applicationId / privacysettingsforapplications

这篇关于Angular 2/4/5 - 将子组件加载到主路由器插座的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！