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

【问题标题】：How to navigate to secondary router outlet that sits in component that is displayed in primary router outlet?如何导航到位于主路由器插座中显示的组件中的辅助路由器插座？
【发布时间】：2020-06-02 02:37:12
【问题描述】：

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

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

如果你想在没有命名插座的情况下实现：-

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

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

如果你想通过命名路由器出口来实现它给用户组件中的路由器出口命名，比如 abc。

包含您要在此插座中显示的组件的路线将出口属性指定为 abc。而路由告诉选择哪个辅助路由。

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

您的路由配置将是：-

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

【讨论】：