Lapsmarsruudid Angularis

Võib juhtuda, et komponendis, mis on juba marsruutimises kasutusel, on ka lapsekomponendid. Saame teha nii, et need lapsekomponendid samuti kuvataks marsruutimise kaudu.

Näiteks olgu meil komponent Aaaa. Me pöördume selle poole URL-i /aaaa/ kaudu. Teeme veel kaks lapsekomponenti: Chix ja Chiy. Kuvame need komponendi Aaaa vaate sees. Aaaa-l on oma silt router-outlet, milles sõltuvalt URL-ist kuvatakse kas üks või teine lapsekomponent.

Nii, teostame kirjeldatu.

Loome esimese lapsekomponendi:

ng generate component chix

Loome teise lapsekomponendi:

ng generate component chiy

Kirjutame eraldi lapsemarsruudid:

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

Lisame need komponendi Aaaa marsruutile lasteraadena:

const appRoutes: Routes = [
	{
		path: 'aaaa',
		component: AaaaComponent,
		children: childRoutes
	},
];

Vanemkomponendi marsruudi tee on lapse marsruudi tee alguseks. See tähendab, et lapsekomponendid on kättesaadavad järgmiste URL-ide kaudu: /aaaa/chix ja /aaaa/chiy.

Seadistame nüüd komponendi Aaaa. Impordime marsruutimise sildi:

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

Kirjutame selle dekoratuurisse:

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

Lisame sildi vaatusse:

<p>see töötab</p>
<router-outlet></router-outlet>

Nüüd saame pöörduda lapsekomponentide poole nende URL-ide kaudu ja need komponendid kuvatakse. Proovige!

Teostage kirjeldatud lapsekomponentide töö.

Tehke lingid, mille kaudu lapsekomponendid vahetuvad.