Using Auxiliary Routes

Angular supports the concept of auxiliary routes, which allow you to set up and navigate multiple independent routes in a single app. Each component has one primary route and zero or more auxiliary outlets. Auxiliary outlets must have unique name within a component.

To define the auxiliary route we must first add a named router outlet where contents for the auxiliary route are to be rendered.

Here's an example:

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

Next we must define the link to the auxiliary route for the application to navigate and render the contents.

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

View Example

Each auxiliary route is an independent route which can have:

  • its own child routes
  • its own auxiliary routes
  • its own route-params
  • its own history stack

原文: https://angular-2-training-book.rangle.io/handout/routing/aux-routes.html