Angular 忽略我的孩子<；路由器出口>；创建多级子路由时

我在创建一个组件时遇到问题，该组件包含一个显示子路由的

，同时也是一个具有自己

的父级的子级

下面是一个plunk，通过

plunk有一个应用程序根组件，其中包含在子组件中指定的空路由，以及一个名为
NavigatorComponent
的父组件，用于导航。这个“父级”使用子路由，我也希望在应用程序组件中有根路由模块

const navigatorRoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES)

我之所以尝试这样做，是因为我不希望任何自定义组件成为路由根

对于那些建议我将导航器移动到父级的人，我会说我已经考虑过了，我可能最终会这么做。然而，我想知道我所建议的模式是否可行

AppComponent
加载根路由模块，该模块没有路由和
NavigatorModule
。
NavigatorModule
中定义了四条路线：


第一个子路由有一个
child1组件的延迟加载（带有
loadChildren
），该组件中没有子组件。单击时，控制台中不会抛出错误，但不会加载任何内容

第二个子路由有一个到
Child2Component
的急切加载路由，该路由同时声明了两个子路由。这些路由加载时没有问题，但加载到父级的
，而不是
Child2Component
中定义的路由
第二个子路由具有相同的结构，但它具有在父级
导航组件
中定义的子路由，位于
子级
属性内。这一行为符合要求，但我希望在
Child2Component
中定义子孩子的嵌套路由（即
Subchild21Component
），而不是
NavigatorComponent
。我在这里试图保持代码不耦合。请让我知道，如果你发现这是夸大
第三个子路由与第一个子路由类似（使用
loadChildren
延迟加载），但在本例中它有子路由。它的行为与第二个孩子的路线相同
第四条路线是最接近我想要实现的目标的路线。它有多条路由，在
Child4Component
中声明，并正确加载到其
中

最后一个路由的缺点是必须将
路由
子级导入到
导航组件
中的子级属性中。这并没有那么糟糕（因为路由是在子级中定义的），但同时我必须定义一个
ModuleWithProviders
（
ModuleWithProviders=RouterModule.forChild（EXP\u routes）
）使用这些路由将该模块导出到
Child4Component
，并将其导出到
NavigatorComponent
，以使其正常工作。这听起来像是样板代码，所以我想我可能遗漏了一些东西。此外，我不知道如何在这里进行延迟加载，因为我必须将模块导入导航器

我不熟悉angular2（不仅仅是angular2，一般来说也是angular2），所以除了问题本身之外，我还要感谢您对代码的任何评论

根路由

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const ROUTES: Routes = [

];

export const appRoutingProviders: any[] = [

];

export const appRoutingModule: ModuleWithProviders = RouterModule.forRoot(ROUTES);

导航器模块路由

const ROUTES: Routes = [
  {
    path: '',
    redirectTo: 'child1',
    pathMatch: 'full'
  },
  { path: 'child1',             loadChildren: () => Child1Module  },
  { path: 'child2',             component: Child2Component },
  {
    path: 'child2-children',
    component: Child2Component,
    children: [
      { path: '',               redirectTo: 'subchild21'        },
      { path: 'subchild21',     component: Subchild21Component  },
      { path: 'subchild22',     component: Subchild22Component  }
    ]
  },
  { path: 'child3', loadChildren: () => Child3Module },
  { path: 'child4', component: Child4Component, children: [...EXP_ROUTES ] }
];

const navigatorRoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

导航器组件/模板

@Component({
  selector: 'navigator',
    template:
    `<h5>We navigate here!</h5>
    <div style="display: inline;">
        <a routerLink="child1" title="Lazy-loading. No children">Child1</a>
        <a routerLink="child2" title="Eager-loading. Children defined in child component">Child2</a>
        <a routerLink="child2-children" title="Eager-loading. Children defined in the parent">Child2-Children</a>
        <a routerLink="child3" title="Lazy-loading. Children defined in the children">Child3</a>
        <a routerLink="child4" title="Eager-loading. Children defined in the parent and the children">Child4</a>
    </div>
    <router-outlet></router-outlet>`
})
export class NavigatorComponent { }

const ROUTES: Routes = [
      { path: 'child2',
        children: [
          { path: 'subchild21', component: Subchild21Component  },
          { path: 'subchild22', component: Subchild22Component  }
        ]
      }
];

const child2RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

@Component({
  selector: 'child2',
    template:
    `<h5>This is child 2!</h5>
    <div style="display: inline;">
        <a routerLink="subchild21">Subchild21</a>
        <a routerLink="subchild22">Subchild22</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child2Component { }

@NgModule({
  imports:      [ child2RoutingModule, Subchild21Module, Subchild22Module ],
  exports:      [ Child2Component ],
  declarations: [ Child2Component ]
})
export class Child2Module { }

const ROUTES: Routes = [
  {
    path: '',
    component: Child3Component,
    children: [
      { path: '',               redirectTo: 'subchild31'        },
      { path: 'subchild31',     component: Subchild21Component  },
      { path: 'subchild32',     component: Subchild22Component  }
    ]
  }
];

const child3RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

@Component({
  selector: 'child3',
  template:
    `<h5>This is child 3!</h5>
    <div style="display: inline;">
        <a routerLink="subchild31">Subchild31</a>
        <a routerLink="subchild32">Subchild32</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child3Component { }

@NgModule({
  imports:      [ child3RoutingModule, ],
  exports:      [ Child3Component, ],
  declarations: [ Child3Component ]
})
export class Child3Module { }

export const EXP_ROUTES: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'subchild41' },  
    { path: 'subchild41', component: Subchild21Component    },
    { path: 'subchild42', component: Subchild22Component    }
];

const child4RoutingModule: ModuleWithProviders = RouterModule.forChild(EXP_ROUTES);

@Component({
  selector: 'child4',
    template:
    `<h5>This is child 4!</h5>
    <div style="display: inline;">
        <a routerLink="subchild41">Subchild41</a>
        <a routerLink="subchild42">Subchild42</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child4Component { }

@NgModule({
  imports:      [ child4RoutingModule, Subchild21Module, Subchild22Module ],
  exports:      [ Child4Component ],
  declarations: [ Child4Component ]
})
export class Child4Module { }

Child2组件/模块

@Component({
  selector: 'navigator',
    template:
    `<h5>We navigate here!</h5>
    <div style="display: inline;">
        <a routerLink="child1" title="Lazy-loading. No children">Child1</a>
        <a routerLink="child2" title="Eager-loading. Children defined in child component">Child2</a>
        <a routerLink="child2-children" title="Eager-loading. Children defined in the parent">Child2-Children</a>
        <a routerLink="child3" title="Lazy-loading. Children defined in the children">Child3</a>
        <a routerLink="child4" title="Eager-loading. Children defined in the parent and the children">Child4</a>
    </div>
    <router-outlet></router-outlet>`
})
export class NavigatorComponent { }

const ROUTES: Routes = [
      { path: 'child2',
        children: [
          { path: 'subchild21', component: Subchild21Component  },
          { path: 'subchild22', component: Subchild22Component  }
        ]
      }
];

const child2RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

@Component({
  selector: 'child2',
    template:
    `<h5>This is child 2!</h5>
    <div style="display: inline;">
        <a routerLink="subchild21">Subchild21</a>
        <a routerLink="subchild22">Subchild22</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child2Component { }

@NgModule({
  imports:      [ child2RoutingModule, Subchild21Module, Subchild22Module ],
  exports:      [ Child2Component ],
  declarations: [ Child2Component ]
})
export class Child2Module { }

const ROUTES: Routes = [
  {
    path: '',
    component: Child3Component,
    children: [
      { path: '',               redirectTo: 'subchild31'        },
      { path: 'subchild31',     component: Subchild21Component  },
      { path: 'subchild32',     component: Subchild22Component  }
    ]
  }
];

const child3RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

@Component({
  selector: 'child3',
  template:
    `<h5>This is child 3!</h5>
    <div style="display: inline;">
        <a routerLink="subchild31">Subchild31</a>
        <a routerLink="subchild32">Subchild32</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child3Component { }

@NgModule({
  imports:      [ child3RoutingModule, ],
  exports:      [ Child3Component, ],
  declarations: [ Child3Component ]
})
export class Child3Module { }

export const EXP_ROUTES: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'subchild41' },  
    { path: 'subchild41', component: Subchild21Component    },
    { path: 'subchild42', component: Subchild22Component    }
];

const child4RoutingModule: ModuleWithProviders = RouterModule.forChild(EXP_ROUTES);

@Component({
  selector: 'child4',
    template:
    `<h5>This is child 4!</h5>
    <div style="display: inline;">
        <a routerLink="subchild41">Subchild41</a>
        <a routerLink="subchild42">Subchild42</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child4Component { }

@NgModule({
  imports:      [ child4RoutingModule, Subchild21Module, Subchild22Module ],
  exports:      [ Child4Component ],
  declarations: [ Child4Component ]
})
export class Child4Module { }

const ROUTES:ROUTES=[
{路径：'child2'，
儿童：[
{路径：'subchild21'，组件：subchild21组件}，
{路径：'subchild22'，组件：subchild22组件}
]
}
];
const child2RoutingModule:ModuleWithProviders=RouterModule.forChild（路由）；
@组成部分({
选择器：'child2'，
模板：
`这是儿童2！
亚儿童21
子弟22
`
})
导出类child2组件{}
@NGD模块({
导入：[child2RoutingModule，Subchild21Module，Subchild22Module]，
导出：[Child2组件]，
声明：[Child2组件]
})
导出类Child2Module{}

Child3组件/模块

@Component({
  selector: 'navigator',
    template:
    `<h5>We navigate here!</h5>
    <div style="display: inline;">
        <a routerLink="child1" title="Lazy-loading. No children">Child1</a>
        <a routerLink="child2" title="Eager-loading. Children defined in child component">Child2</a>
        <a routerLink="child2-children" title="Eager-loading. Children defined in the parent">Child2-Children</a>
        <a routerLink="child3" title="Lazy-loading. Children defined in the children">Child3</a>
        <a routerLink="child4" title="Eager-loading. Children defined in the parent and the children">Child4</a>
    </div>
    <router-outlet></router-outlet>`
})
export class NavigatorComponent { }

const ROUTES: Routes = [
      { path: 'child2',
        children: [
          { path: 'subchild21', component: Subchild21Component  },
          { path: 'subchild22', component: Subchild22Component  }
        ]
      }
];

const child2RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

@Component({
  selector: 'child2',
    template:
    `<h5>This is child 2!</h5>
    <div style="display: inline;">
        <a routerLink="subchild21">Subchild21</a>
        <a routerLink="subchild22">Subchild22</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child2Component { }

@NgModule({
  imports:      [ child2RoutingModule, Subchild21Module, Subchild22Module ],
  exports:      [ Child2Component ],
  declarations: [ Child2Component ]
})
export class Child2Module { }

const ROUTES: Routes = [
  {
    path: '',
    component: Child3Component,
    children: [
      { path: '',               redirectTo: 'subchild31'        },
      { path: 'subchild31',     component: Subchild21Component  },
      { path: 'subchild32',     component: Subchild22Component  }
    ]
  }
];

const child3RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

@Component({
  selector: 'child3',
  template:
    `<h5>This is child 3!</h5>
    <div style="display: inline;">
        <a routerLink="subchild31">Subchild31</a>
        <a routerLink="subchild32">Subchild32</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child3Component { }

@NgModule({
  imports:      [ child3RoutingModule, ],
  exports:      [ Child3Component, ],
  declarations: [ Child3Component ]
})
export class Child3Module { }

export const EXP_ROUTES: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'subchild41' },  
    { path: 'subchild41', component: Subchild21Component    },
    { path: 'subchild42', component: Subchild22Component    }
];

const child4RoutingModule: ModuleWithProviders = RouterModule.forChild(EXP_ROUTES);

@Component({
  selector: 'child4',
    template:
    `<h5>This is child 4!</h5>
    <div style="display: inline;">
        <a routerLink="subchild41">Subchild41</a>
        <a routerLink="subchild42">Subchild42</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child4Component { }

@NgModule({
  imports:      [ child4RoutingModule, Subchild21Module, Subchild22Module ],
  exports:      [ Child4Component ],
  declarations: [ Child4Component ]
})
export class Child4Module { }

const ROUTES:ROUTES=[
{
路径：“”，
组件：Child3组件，
儿童：[
{路径：''，重定向到：'subchild31'}，
{路径：'subchild31'，组件：subchild21组件}，
{路径：'subchild32'，组件：subchild22组件}
]
}
];
const Child3路由模块：ModuleWithProviders=RouterModule.forChild（路由）；
@组成部分({
选择器：'child3'，
模板：
`这是孩子3！
子弟31
子弟32
`
})
导出类child3组件{}
@NGD模块({
导入：[child3RoutingModule，]，
导出：[Child3组件，]，
声明：[Child3Component]
})
导出类child3模块{}

Child4组件/模块

@Component({
  selector: 'navigator',
    template:
    `<h5>We navigate here!</h5>
    <div style="display: inline;">
        <a routerLink="child1" title="Lazy-loading. No children">Child1</a>
        <a routerLink="child2" title="Eager-loading. Children defined in child component">Child2</a>
        <a routerLink="child2-children" title="Eager-loading. Children defined in the parent">Child2-Children</a>
        <a routerLink="child3" title="Lazy-loading. Children defined in the children">Child3</a>
        <a routerLink="child4" title="Eager-loading. Children defined in the parent and the children">Child4</a>
    </div>
    <router-outlet></router-outlet>`
})
export class NavigatorComponent { }

const ROUTES: Routes = [
      { path: 'child2',
        children: [
          { path: 'subchild21', component: Subchild21Component  },
          { path: 'subchild22', component: Subchild22Component  }
        ]
      }
];

const child2RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

@Component({
  selector: 'child2',
    template:
    `<h5>This is child 2!</h5>
    <div style="display: inline;">
        <a routerLink="subchild21">Subchild21</a>
        <a routerLink="subchild22">Subchild22</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child2Component { }

@NgModule({
  imports:      [ child2RoutingModule, Subchild21Module, Subchild22Module ],
  exports:      [ Child2Component ],
  declarations: [ Child2Component ]
})
export class Child2Module { }

const ROUTES: Routes = [
  {
    path: '',
    component: Child3Component,
    children: [
      { path: '',               redirectTo: 'subchild31'        },
      { path: 'subchild31',     component: Subchild21Component  },
      { path: 'subchild32',     component: Subchild22Component  }
    ]
  }
];

const child3RoutingModule: ModuleWithProviders = RouterModule.forChild(ROUTES);

@Component({
  selector: 'child3',
  template:
    `<h5>This is child 3!</h5>
    <div style="display: inline;">
        <a routerLink="subchild31">Subchild31</a>
        <a routerLink="subchild32">Subchild32</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child3Component { }

@NgModule({
  imports:      [ child3RoutingModule, ],
  exports:      [ Child3Component, ],
  declarations: [ Child3Component ]
})
export class Child3Module { }

export const EXP_ROUTES: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'subchild41' },  
    { path: 'subchild41', component: Subchild21Component    },
    { path: 'subchild42', component: Subchild22Component    }
];

const child4RoutingModule: ModuleWithProviders = RouterModule.forChild(EXP_ROUTES);

@Component({
  selector: 'child4',
    template:
    `<h5>This is child 4!</h5>
    <div style="display: inline;">
        <a routerLink="subchild41">Subchild41</a>
        <a routerLink="subchild42">Subchild42</a>
    </div>
    <router-outlet></router-outlet>`
})
export class Child4Component { }

@NgModule({
  imports:      [ child4RoutingModule, Subchild21Module, Subchild22Module ],
  exports:      [ Child4Component ],
  declarations: [ Child4Component ]
})
export class Child4Module { }

导出常量EXP\u路由：路由=[
{路径：''，路径匹配：'full'，重定向到：'subchild41'}，
{path:'subchild41'，component:subchild21 component}，
{路径：'subchild42'，组件：subchild22组件}
];
const child4RoutingModule:ModuleWithProviders=RouterModule.forChild（EXP_ROUTES）；
@组成部分({
选择器：“child4”，
模板：
`这是孩子4！
子弟41
子弟42
`
})
导出类child4组件{}
@NGD模块({
导入：[child4RoutingModule，Subchild21模块，Subchild22模块]，
导出：[Child4组件]，
声明：[Child4组件]
})
导出类Child4Module{}
我同意您的评估，即NavigatorModule应折旧，其功能应移至AppModule。除非您有另一套完全独立的功能，您将在NavigatorModule之外实现，否则您将