如何导航到备用路由器插座中显示的组件中的辅助路由器插座？

Question

因此，经过数小时的搜索，我找不到类似的问题。设置如下：一个应用程序模块和一个路由模块。主路由器出口中显示的组件是用户组件，而主路由器出口在app-component 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"
                }
              ]
            }
          ]