Lasten reitit Angularissa

Voi olla, että komponentissa, joka on jo käytössä reitityksessä, on myös lapsikomponentteja. Voimme tehdä niin, että nämä lapsikomponentit näytetään myös reitityksen kautta.

Esimerkkinä olkoon, että meillä on komponentti Aaaa. Pääsemme siihen käsiksi URL-osoitteella /aaaa/. Teemme kaksi lisää lapsikomponenttia: Chix ja Chiy. Näytämme ne Aaaa -komponentin näkymän sisällä. Aaaa:lla on oma router-outlet -tagi, jossa riippuen URL-osoitteesta näytetään joko yksi tai toinen lapsikomponentti.

Joten toteutetaan kuvattu.

Luodaan ensimmäinen lapsikomponentti:

terminalng generate component chix

Luodaan toinen lapsikomponentti:

terminalng generate component chiy

Kirjoitetaan erilliset lapsireitit:

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

Lisätään ne Aaaa -komponentin reittiin lasten reitteinä:

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

Yläkomponentin reitin polku tulee alareitin polun alkuun. Tämä tarkoittaa, että lapsikomponentit ovat saatavilla seuraavista URL-osoitteista: /aaaa/chix ja /aaaa/chiy.

Määritetään nyt Aaaa -komponentti. Tuodaan reititystagi:

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

Määritellään se dekorattorissa:

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

Lisätään tagi näkymään:

app/aaaa/aaaa.component.html<p>se toimii</p>
<router-outlet></router-outlet>

Nyt lapsikomponentteihin voi viitata niiden URL-osoitteilla ja nämä komponentit tulevat näkymään. Kokeile!