使用辅助路由

Angular 2支持辅助路由的概念，它允许您在单个应用程序中设置和导航多个独立路由。 每个组件具有一个主路由和零个或多个辅助出口。 辅助出口必须在组件中具有唯一的名称。

为了定义辅助路由，我们必须首先添加一个命名的路由出口，其中要呈现辅助路由的内容。

这里有一个例子：

  1. import {Component} from '@angular/core';
  3. @Component({
  4.   selector: 'app',
  5.   template: `
  6.     <nav>
  7.       <a [routerLink]="['/component-one']">Component One</a>
  8.       <a [routerLink]="['/component-two']">Component Two</a>
  9.       <a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">Component Aux</a>
  10.     </nav>
  12.     <div style="color: green; margin-top: 1rem;">Outlet:</div>
  13.     <div style="border: 2px solid green; padding: 1rem;">
  14.       <router-outlet></router-outlet>
  15.     </div>
  17.     <div style="color: green; margin-top: 1rem;">Sidebar Outlet:</div>
  18.     <div style="border: 2px solid blue; padding: 1rem;">
  19.       <router-outlet name="sidebar"></router-outlet>
  20.     </div>
  21.   `
  22. })
  23. export class AppComponent {
  25. }

接下来，我们必须定义到应用程序的辅助路由的链接，以导航和呈现内容。

  1. <a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">
  2.   Component Aux
  3. </a>

View Example

每个辅助路由是独立的路由，可以拥有：

  • 自己的子路由
  • 自己的辅助路由
  • 自己的路由参数
  • 自己的浏览器历史记录栈