Html 如何在angular2（2.1.1）中使用一个routerLink触发多个插座

当我选择一个

routerLink

元素时，我想在DOM的两个独立区域中交换组件。如何将单个

路由链接

路由到2个

并为每个

指定唯一的组件

我想要这样的东西：

<div id="region1>
  <a routerLink="/view1" routerLinkActive="active">View 1</a>
  <a routerLink="/view2" routerLinkActive="active">View 2</a>

  <!-- First area to swap -->
  <router-outlet name="sidebar"></router-outlet>

<div>

<div id="region2>
  <!-- Second area to swap -->
  <router-outlet name="mainArea"></router-outlet>
<div>    

---

这不能完全按照你的要求去做。路由器的用途是维护有关特定页面的信息

如果要显示和隐藏任何组件而不反映任何路由信息，则需要使用

*ngIf

指令。要这样使用它，您需要在应用程序中的某个位置保留一个变量，该变量可用于触发

*ngIf

指令

您可以使用任何类型的数据，但需要以布尔值或解析为布尔值的表达式的形式将其传递给

*ngIf

语句：以下是示例“

组件

showComponentBool: boolean = true;
showComponentStr: string = 'show';

html

<div *ngIf="showComponentBool">
  <div *ngIf="showComponentStr='show'"></div>
</div>

带“@angular/core”：“^4.0.0”

<div *ngIf="showComponentBool">
  <div *ngIf="showComponentStr='show'"></div>
</div>

<a [routerLink]="[{ outlets: { primary: 'contact', aux: 'aside' }}]">Contact + Aux</a>