Korzystanie z pomocniczych tras

Angular obsługuje koncepcję tras pomocniczych, które umożliwiają konfigurację i nawigację na wielu niezależnych trasach w jednej aplikacji. Każdy komponent ma jedną główną trasę i zero lub więcej dodatkowych gniazdek. Gniazda pomocnicze muszą mieć unikalną nazwę w komponencie.

Aby zdefiniować trasę pomocniczą, musimy najpierw dodać nazwane miejsce docelowe routera, w którym ma zostać wyrenderowana zawartość dla trasy pomocniczej.

Oto przykład:

import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: `
    <nav>
      <a [routerLink]="['/component-one']">Component One</a>
      <a [routerLink]="['/component-two']">Component Two</a>
      <a [routerLink]="[{ outlets: { 'sidebar': ['component-aux'] } }]">Component Aux</a>
    </nav>

    <div style="color: green; margin-top: 1rem;">Outlet:</div>
    <div style="border: 2px solid green; padding: 1rem;">
      <router-outlet></router-outlet>
    </div>

    <div style="color: green; margin-top: 1rem;">Sidebar Outlet:</div>
    <div style="border: 2px solid blue; padding: 1rem;">
      <router-outlet name="sidebar"></router-outlet>
    </div>
  `
})
export class AppComponent {

}

Następnie musimy zdefiniować link do pomocniczej trasy dla aplikacji, aby nawigować i renderować zawartość.

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

Zobacz przykład [055]

Każda trasa pomocnicza jest niezależną trasą, która może mieć:

• własne trasy dla dzieci
• własne trasy pomocnicze
• własne parametry trasy
• własny stos historii