Vaikiniai maršrutai Angular

Gali būti taip, kad komponente, kuris jau naudojamas maršrute, taip pat yra vaikinių komponentų. Galima padaryti taip, kad šie vaikiniai komponentai taip pat būtų rodomi per maršrutą.

Pavyzdžiui, tarkime, kad turime komponentą Aaaa. Mes pasiekiame jį per URL /aaaa/. Sukurkime dar du vaikinius komponentus: Chix ir Chiy. Juos rodysime viduje komponento Aaaa atvaizdo. Aaaa turės savo žymę router-outlet, kurioje, priklausomai nuo URL, bus rodomas vienas arba kitas vaikinis komponentas.

Taigi, įgyvendinkime aprašytą.

Sukurkime pirmąjį vaikinį komponentą:

ng generate component chix

Sukurkime antrąjį vaikinį komponentą:

ng generate component chiy

Parašykime atskirus vaikinių maršrutus:

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

Pridėkime juos prie komponento Aaaa maršruto kaip vaikinius:

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

Tėvinio komponento maršruto kelias bus vaikinio kelio pradžia. Tai reiškia, kad vaikiniai komponentai bus prieinami pagal šiuos URL: /aaaa/chix ir /aaaa/chiy.

Dabar sukonfigūruokime komponentą Aaaa. Importuokime žymę maršrutui:

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

Paregistruokime jį dekoratoriuje:

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

Įterpkime žymę į atvaizdą:

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

Dabar bus galima kreiptis į vaikinius komponentus pagal jų URL ir šie komponentai bus rodomi. Išbandykite!

Įgyvendinkite aprašytą vaikinių komponentų veikimą.

Sukurkite nuorodas, kurių paspaudimas perjungs vaikinius komponentus.