Dynamiczne dodawanie komponentów trasy

Zamiast definiować osobno każdy element trasy, użyj RouterOutlet, który służy jako symbol zastępczy komponentu; Angular dynamicznie dodaje komponent trasy aktywowanej do <router-outlet></router-outlet>.

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

@Component({
  selector: 'app',
  template: `
    <nav>
      <a routerLink="/component-one">Component One</a>
      <a routerLink="/component-two">Component Two</a>
    </nav>

    <router-outlet></router-outlet>
    <!-- Route components are added by router here -->
  `
})
export class AppComponent {}

W powyższym przykładzie komponent odpowiadający określonej trasie zostanie umieszczony za <router-outlet></router-outlet>.

Zobacz przykład [046]