Dziecięce trasy w Angular

Może się zdarzyć, że w komponencie, który jest już używany w roulingu, znajdują się również komponenty potomne. Można sprawić, że te komponenty potomne również będą wyświetlane poprzez routing.

Dla przykładu załóżmy, że mamy komponent Aaaa. Dostęp do niego uzyskujemy przez URL /aaaa/. Stwórzmy jeszcze dwa komponenty potomne: Chix i Chiy. Będziemy je wyświetlać wewnątrz widoku komponentu Aaaa. Aaaa będzie miał własny znacznik router-outlet, w którym w zależności od URL będzie wyświetlany albo jeden, albo drugi komponent potomny.

Zaimplementujmy opisane powyżej.

Stwórzmy pierwszy komponent potomny:

terminalng generate component chix

Stwórzmy drugi komponent potomny:

terminalng generate component chiy

Napiszmy osobne trasy potomne:

app/app.component.tslet childRoutes: Routes = [
  { path: 'chix', component: ChixComponent },
  { path: 'chiy', component: ChiyComponent },
];

Dodajmy je do trasy komponentu Aaaa jako dzieci:

app/app.component.tsconst appRoutes: Routes = [
  {
    path: 'aaaa',
    component: AaaaComponent,
    children: childRoutes
  },
];

Ścieżka z trasy komponentu nadrzędnego będzie początkiem ścieżki komponentu potomnego. Oznacza to, że komponenty potomne będą dostępne pod następującymi URL: /aaaa/chix i /aaaa/chiy.

Skonfigurujmy teraz komponent Aaaa. Zaimportujmy znacznik do roulingu:

app/aaaa/aaaa.component.tsimport { RouterOutlet } from '@angular/router';

Zadeklarujmy go w dekoratorze:

app/aaaa/aaaa.component.ts@Component({
  ......
  imports: [RouterOutlet],
  ......
})

Wstawmy znacznik do widoku:

app/aaaa/aaaa.component.html<p>it works</p>
<router-outlet></router-outlet>

Teraz będzie można uzyskać dostęp do komponentów potomnych po ich URLach i te komponenty będą się wyświetlać. Spróbuj!