我们可以有多个 <router-outlet> angular2+ 吗？答案

【问题标题】：Can we have multiple <router-outlet> angular2+?我们可以有多个 <router-outlet> angular2+ 吗？
【发布时间】：2016-09-09 06:44:06
【问题描述】：

如果可能有多个路由器出口，我没有任何工作代码，但假设我在 AppComponent 的父 <router-outlet> 中有登录页面。登录后，我必须在父 <router-outlet> 中显示 MyHomeComponent。现在，假设在MyHomeComponent 我想要一个孩子<router-outlet>，当用户点击Inbox、Outbox 和@987654332 时，我想在其中显示inbox 消息、outbox 消息、starred 消息@链接。请帮我找到这个问题的答案

应用组件 <router-outlet></router-outlet>,

主页组件

<a routerLink="/xyz">Inbox</a>
<a routerLink="/abc">Outbox</a>
<router-outlet name='outlet1'></router-outlet>

我的路线路径

{ path: 'login', component: LoginComponent},
 { path: '', component: LoginComponent },
 { path: 'user', children:[ 
         { path: ':name',children:[ 
               {path:'abc', component: InboxComponent, outlet: 'outlet1' },                                      
               {path:'xyz', component: OutboxComponent, outlet:'outlet1' } 
    ] }]}, 
    { path: '**', component: PageNotFoundComponent }

【问题讨论】：

你是怎么解决这个问题的？

标签： angular

【解决方案1】：

您可以为每条路由设置一个主要的<router-outlet>，并附加一个名为<router-outlet name="abc">s 的名称。寻址这些命名出口的路由称为辅助路由。这些路由反映在 () 内的 URL 中，例如 /crisis-center(aux:chat;open=true)"

另见

【讨论】：

我做了类似的事情，在主要出口显示登录页面，登录后我在同一个出口显示主页。现在，我想在子路由器插座中显示收件箱和发件箱消息，但如果我按照您所说的那样使用，主插座将被子插座取代
我自己不太了解辅助路由，但没有看到演示您尝试过的代码的代码，我根本看不到诊断问题的方法。
请编辑您的问题并在此处添加代码。 cmets 中的代码不可读。
其实我不知道路由配置中的outlet: 'xxx'是做什么的，也不知道有没有什么作用。我所看到的是当 routerLink 或 router.navigate() 传递 {outlets: ...} 对象时在命名插座中创建的组件，如我的答案中一些链接文档中的示例所示。