如何导航到位于主路由器插座中显示的组件中的辅助路由器插座?

Question

所以，经过几个小时的搜索，我找不到类似的问题。设置如下：一个应用模块和一个路由模块。主路由器插座中显示的组件是用户组件，主路由器插座位于应用程序组件 html 文件中。我想导航到位于用户组件 html 中的路由器插座。我只找到了嵌套路由和多出口路由示例/解决方案，这些示例/解决方案浏览所有或两个路由器都在同一个 html 文件中的应用程序。这在某种程度上可能吗？

Answer 1

如果你想

1. 在没有命名出口的情况下实现：-

在您的路由配置中，您希望在用户组件内的路由器插座内显示的任何组件都应该作为用户组件下的子路由：- 例如：

[
{
path: 'user',
component: UserComponent,
children: [
{
path: 'info',
component: UserInfoComponent
}
]
}
]

2. 如果你想通过命名的路由器插座来实现它 在用户组件中为路由器插座命名，假设abc。

   具有要在此插座内显示的组件的路线 将出口属性作为 abc。同时路由告诉选择哪个辅助路由。

   this.router.navigate(["user", { outlets: { abc: ["info"] } }]);

   您的路由配置将是：-

   [ { path: 'user', component: UserComponent, children: [ { path: 'info', component: UserInfoComponent, outlet: "abc" } ] } ]