Childroutes in Angular

Het kan voorkomen dat in een component dat al wordt gebruikt in routing, er ook childcomponenten zijn. We kunnen het zo maken, dat deze childcomponenten ook worden weergegeven via routing.

Laten we als voorbeeld aannemen dat we een component Aaaa hebben. We benaderen het via de URL /aaaa/. Laten we nog twee childcomponenten maken: Chix en Chiy. We zullen ze binnenin het template van component Aaaa weergeven. Aaaa zal een eigen router-outlet tag hebben, waarin afhankelijk van de URL of het ene, of het andere childcomponent wordt getoond.

Laten we het beschrevene implementeren.

Laten we het eerste childcomponent aanmaken:

terminalng generate component chix

Laten we het tweede childcomponent aanmaken:

terminalng generate component chiy

Laten we de aparte childroutes schrijven:

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

Laten we ze toevoegen aan de route van component Aaaa als children:

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

Het pad van de route van de parent component zal het begin zijn van het pad van de child. Dit betekent dat de childcomponenten beschikbaar zullen zijn via de volgende URLs: /aaaa/chix en /aaaa/chiy.

Laten we nu component Aaaa configureren. Importeren we de tag voor routing:

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

Laten we het in de decorator specificeren:

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

Laten we de tag in de template plaatsen:

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

Nu is het mogelijk om de child componenten via hun URLs te benaderen en deze componenten zullen worden getoond. Probeer het!