Question

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

Answer 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" } ] } ]

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

1 个答案: