Question

当我选择routerLink元素时，我想在DOM的2个独立区域中交换组件。如何将单个routerLink路由到2 <router-outlet>并为每个<router-outlet>指定一个唯一的组件？

我想要这样的事情：

<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>

路由

const routes: Routes = [
  { path: '', redirectTo: 'view1', pathMatch: 'full'},
  { path: 'view1', {
    outlets : 
      [
       //one path specifies 2 components directed at 2 `router-outlets`
       component: View1Sidebar, outlet : 'sidebar'
       component: View1mainArea, outlet : 'mainArea'
      ]
    }
  },
  { path: 'view2', {
    outlets : 
      [
       component: View2Sidebar, outlet : 'sidebar'
       component: View2mainArea, outlet : 'mainArea'
      ]
    }
  },
];

Answer 1

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

如果要显示和隐藏任何组件而不反映任何路径信息，那么您将要使用*ngIf指令。要像这样使用它，您需要在应用程序中保留一个可用于触发*ngIf指令的变量。

您可以使用任何类型的数据，但是您需要以布尔值或表达式的形式将其传递给*ngIf语句，该布尔值或表达式解析为布尔值：这里是示例＆＃34;

<强>组件

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

<强> HTML

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

Answer 2

使用“@ angular / core”：“^ 4.0.0”

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

https://stackoverflow.com/a/42558766/2536623

如何使用angular2（2.1.1）中的一个routerLink触发多个出口

2 个答案: