Apakšmaršruti Angular

Var gadīties, ka komponentā, kurš jau tiek izmantots maršrutēšanā, atrodas arī apakškomponenti. Var izveidot tā, lai šie apakškomponenti tiktu rādīti arī caur maršrutēšanu.

Piemēram, pieņemsim, ka mums ir komponents Aaaa. Mēs piekļūstam tam caur URL /aaaa/. Izveidosim vēl divus apakškomponentus: Chix un Chiy. Mēs tos rādīsim Aaaa komponenta ietvaros. Aaaa būs savs router-outlet atribūts, kurā atkarībā no URL tiks rādīts vai nu pirmais, vai otrais apakškomponents.

Tātad, īstenosim aprakstīto.

Izveidosim pirmo apakškomponentu:

ng generate component chix

Izveidosim otro apakškomponentu:

ng generate component chiy

Uzrakstīsim atsevišķus apakšmaršrutus:

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

Pievienosim tos Aaaa komponenta maršrutam kā apakšējos:

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

Virsmaršruta ceļš būs apakšmaršruta ceļa sākums. Tas nozīmē, ka apakškomponenti būs pieejami šādos URL: /aaaa/chix un /aaaa/chiy.

Tagad konfigurēsim Aaaa komponentu. Importēsim maršrutēšanas atribūtu:

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

Norādīsim to dekoratorā:

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

Ievietosim atribūtu skatā:

<p>it works</p>
<router-outlet></router-outlet>

Tagad varēs piekļūt apakškomponentiem caur to URL un šie komponenti tiks rādīti. Izmēģiniet!

Realizējiet aprakstīto apakškomponentu darbību.

Izveidojiet saites, ar kurām pārslēgt apakškomponentus.