带有routerLink的angular2未设置插座答案

【问题标题】：angular2 unset outlets with routerLink带有routerLink的angular2未设置插座
【发布时间】：2017-01-17 09:58:32
【问题描述】：

我的模板如下所示：

<router-outlet></router-outlet>
<router-outlet name="rightpanel"></router-outlet>

假设我的网址是：

/#/page1(rightpanel:panel)

我想切换到 page2 并使用 routerLink 指令删除辅助插座。我尝试了以下方法：

[routerLink]="['/page2', {outlets: {rightpanel: null}}
[routerLink]="['/page2', {outlets: {}}

在这两种情况下，页面都切换到 page2，但 rightpanel 仍然处于活动状态。我能解决的唯一方法是把下面的代码放在page2的构造函数中：

this.router.navigate([{outlets: {rightpanel: null}}]);

这不是一个好的解决方案，原因有很多。

使用 Angular 2.4.3，路由器 3.4.3

【问题讨论】：

【解决方案1】：

您需要设置主要出口，而不仅仅是 URL。就我个人而言，这似乎是一种非常奇怪的行为，但您可以通过以下方式使其发挥作用：

[routerLink]="[{outlets: { primary: 'page2', rightpanel: null }}]"

根据文档，primary 是未命名插座的名称。

【讨论】：