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

问题描述

我目前正在使用 angular 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,
    },
  ];

我们有一个主要的 ，其中 angular 加载其父组件的所有内容.这里 ApplicationsComponent 有一个孩子 PrivacysettingsforapplicationsComponent，而后者又有两个孩子(PrivacysettingsforapplicationservicesComponent 和 PrivacysettingsforapplicationdataComponent，即:服务和数据).

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).

我想检查是否有任何方法可以在主 <router-outlet> 而不是其直接父 < 上加载 (PrivacysettingsforapplicationsComponent) 子项.路由器插座> 即.ApplicationComponent 的.我检查过的一种方法是将子组件作为父组件的对等组件，但是我的面包屑模块​​无法识别谁是该组件的真正父组件 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.

推荐答案

path: "applications/:applicationId/privacysettingsforapplications"

将其替换为以下路径

path: ":applicationId/privacysettingsforapplications"

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