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:

ng generate component chix

Luodaan toinen lapsikomponentti:

ng generate component chiy

Kirjoitetaan erilliset lapsireitit:

let childRoutes: Routes = [
	{ path: 'chix', component: ChixComponent },
	{ path: 'chiy', component: ChiyComponent },
];

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

const 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:

import { RouterOutlet } from '@angular/router';

Määritellään se dekorattorissa:

@Component({
	......
	imports: [RouterOutlet],
	......
})

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

<p>se toimii</p>
<router-outlet></router-outlet>

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

Toteuta kuvattu lapsikomponenttien toiminta.

Tee linkit, joilla lapsikomponentit vaihtuvat.