Angular 5 的子路由无法正常工作

您好，我正在尝试使用子路由，但它无法按预期工作。

我的 Angular 5 结构：

在这种情况下，顶部导航包含加载子模块的链接，子导航包含更新子模块内容的链接。

应用程序模块（和应用程序组件）包含一个顶部导航栏，用于导航到不同的子模块，应用程序组件模板可能如下所示

 <top-navbar></top-navbar>
 <router-outlet></router-outlet>

但这就是复杂性。我需要我的子模块具有类似的布局，带有第二级导航栏和自己的路由器出口来加载自己的组件。

 <sub-navbar></sub-navbar>
 <router-outlet name='sub'></router-outlet>

我的app.module.ts

RouterModule.forRoot([
  {
    path: 'career', component: CareerComponent,
    children: [
      { path: 'roles', component: rolesComponent, outlet: 'sub' }
    ]
  }
])

我的 HTML 文件，我在导航按钮上使用以下格式：

[routerLink]="[{ outlets: { sub: ['roles'] } }]"

我还尝试了以下操作（这没有任何作用，我单击“角色”按钮，但没有任何反应）：

[routerLink]="['/roles']"

在顶部菜单上，我从导航栏中单击“职业”。 现在我的网址显示为 mywebsite.com/career

现在从这里我有一个带有侧面菜单的职业页面，其中一个按钮是“角色”。这应该会更改页面的部分视图。 组件加载正确，问题是url格式错误。

预期网址：

 mywebsite.com/career/roles

它如何显示（错误）：

 mywebsite.com/career/(sub:roles)

首先，让我们确保我们在术语方面意见一致。

“子”路由是嵌套路由。像这样的东西：

请注意，应用程序路由的路由器出口是全屏的。 shell 组件的路由器出口是导航栏下方的区域。编辑组件的路由器出口是选项卡下方的区域。

子路由使用以下方式定义children属性如您在上面的问题中所示的路线配置中所具有的属性。

子路线是不同的来自命名（也称为辅助）路线。辅助路由适用于并排且不处于嵌套关系的路由。目前有lots辅助路由的错误和问题，我目前不推荐它们。

从你的描述看来你确实需要child路线不辅助/命名路线。所以你不应该使用name属性也不outlet财产。

除非我误解了你的场景？

我有一个 YouTube 视频，其中演示了子路由（以及其他一些路由技术）：

您可以在这里找到示例代码：

https://github.com/DeborahK/MovieHunter-routing https://github.com/DeborahK/MovieHunter-routing

和这里：

https://github.com/DeborahK/Angular-Routing https://github.com/DeborahK/Angular-Routing