Gyermek útvonalak az Angular-ban

Előfordulhat, hogy egy olyan komponensben, amely már részt vesz az útválasztásban, vannak gyermek komponensek is. Meg lehet tenni úgy, hogy ezek a gyermek komponensek szintén az útválasztáson keresztül jelenjenek meg.

Példaként legyen egy Aaaa komponensünk. A /aaaa/ URL-en keresztül érjük el. Készítsünk még két gyermek komponenst: Chix és Chiy. Ezeket a Aaaa komponens belsejében fogjuk megjeleníteni. A Aaaa komponensnek saját router-outlet tagje lesz, amelyben az URL-től függően vagy az egyik, vagy a másik gyermek komponens jelenik meg.

Tehát valósítsuk meg a leírtakat.

Hozzuk létre az első gyermek komponenst:

terminalng generate component chix

Hozzuk létre a második gyermek komponenst:

terminalng generate component chiy

Írjunk különálló gyermek útvonalakat:

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

Adjuk hozzá őket a Aaaa komponens útvonalához mint gyermekek:

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

A szülő komponens útvonalának elérési útja lesz a gyermek elérési útjának kezdete. Ez azt jelenti, hogy a gyermek komponensek a következő URL-eken lesznek elérhetők: /aaaa/chix és /aaaa/chiy.

Most állítsuk be a Aaaa komponenst. Importáljuk az útválasztáshoz szükséges tagot:

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

Írjuk be a dekorátorba:

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

Helyezzük el a tagot a nézetben:

app/aaaa/aaaa.component.html<p>működik</p>
<router-outlet></router-outlet>

Most már el lehet érni a gyermek komponenseket azok URL-jein, és ezek a komponensek meg fognak jelenni. Próbáld ki!