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

Posted 2023-02-22

【中文标题】Angular 5 的子路由无法正常工作

【英文标题】：Child Routing for Angular 5 not working properly

【发布时间】：2019-01-01 05:51:50

【问题描述】：

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

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

【问题讨论】：

在您的配置中没有太多深入，这似乎没有错。当您使用命名插座时，这就是您访问它的方式。你应该阅读更多关于它的信息angular.io/guide/…

如何更改我的配置以使其显示为职业/角色？

【参考方案1】：

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

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

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

子路由是使用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