Angular路由器：定义子路由

通过在路由器配置中使用子路由，可以轻松地在 Angular 应用程序中创建任何类型的路由层次结构。

以下内容涵盖 Angular 2+ 应用程序的路由。

定义子路由所需要做的就是在父配置中添加一组额外的路由配置对象作为 children 键的一部分。 这是一个示例配置：

const routes: Routes = [
  { path: '', component: ParentComponent, children: [
    { path: 'red', component: ChildComponent },
    { path: 'blue', component: AnotherChildComponent }
  ] }
];

并且不要忘记在任何父组件的模板中添加 router-outlet 指令：

<router-outlet></router-outlet>

我们这样配置，可用的路由将是 /, /red 和 /blue (eg: http://localhost:4200/red[ X132X])

---

子路由反过来也可以有自己的子路由：

const routes: Routes = [
  { path: '', component: ParentComponent, children: [
    { path: 'red', component: ChildComponent, children: [
      { path: 'knock-knock', component: SubChildComponent, children: [
        { path: 'neo', component: SubSubChildComponent }
      ] },
    ] },
    { path: 'blue', component: AnotherChildComponent }
  ] }
];

现在你可以通过导航到 /red/knock-knock/neo 🐇 到达兔子洞的尽头

没有路径的路线

您不必一定有通往所有路线的路径。 让我们以先前配置的这种变化为例：

const routes: Routes = [
  { path: '', component: ParentComponent, children: [
    { path: '', component: ChildComponent, children: [
      { path: 'knock-knock', component: SubChildComponent, children: [
        { path: 'neo', component: SubSubChildComponent }
      ] },
    ] },
    { path: 'blue', component: AnotherChildComponent }
  ] }
];

注意带有 ChildComponent 组件的路由没有路径。 这意味着用户将直接导航到 /knock-knock/neo，但 ChildComponent 仍将被实例化，其子组件仍将插入其路由器出口。

无组件路由

也可以有一个没有组件的父路由：

const routes: Routes = [
  { path: '', component: ParentComponent, children: [
    { path: 'red', children: [
      { path: 'knock-knock', component: SubChildComponent, children: [
        { path: 'neo', component: SubSubChildComponent }
      ] },
    ] },
    { path: 'blue', component: AnotherChildComponent }
  ] }
];

使用此配置，用户仍然可以导航到 /red/knock-knock/neo，但 SubChildComponent 将插入到 ParentComponent 的路由器插座中反而。

如果我们的路径为我们提供了我们希望在组件链的其余部分或兄弟组件中可用的数据或参数，这将很有用。 让我们用一个例子来说明：

const routes: Routes = [
  { path: '', component: ParentComponent, children: [
    { path: ':choice', children: [
      { path: 'neo', component: ChildComponent },
      { path: 'trinity', component: AnotherChildComponent }
    ] }
  ] }
];

使用这种配置， ChildComponent 和 AnotherChildComponent 都可以访问 choice 参数，我们不必为了包装两个兄弟而涉及另一个虚拟组件.