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

Question

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

我的5号角结构：

在这种情况下，top-nav包含指向加载子模块的链接，sub-nav包含用于更新子模块内容的链接。

应用程序模块（和应用程序组件）包含一个顶部导航栏，可导航到不同的子模块，并且应用程序组件模板看起来像这样

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

Answer 1

首先，请确保我们在同一术语页面上。

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

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

子路由是使用children属性定义的，就像您在上述问题中显示的路由配置一样。

子路由与命名（也称为辅助）路由不同。辅助路由用于并排且没有嵌套关系的路由。当前存在很多错误和辅助路由问题，我目前不建议使用。

从您的描述看来，您确实需要 child 路由，而不是 aux / named 路由。因此，您不应该使用name属性或outlet属性。

除非我误解了您的情况？

我有一个YouTube视频，可以在此处演示子路线（和其他一些路线选择技术）：https://www.youtube.com/watch?v=LaIAHOSKHCQ&t=5s

您可以在此处找到示例代码：

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

在这里：

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