Njia za Watoto katika Angular

Inawezekana kwamba katika kipengele ambacho tayari kinatumika katika uratibu wa anuwai, pia kuna vipengele vya watoto. Inawezekana kufanya hivi, ili vipengele hivi vya watoto pia vionekhe kupitia uratibu wa anuwai.

Kwa mfano tuache tukiwa na kipengele Aaaa. Tunakiomba kupitia URL /aaaa/. Tutengeneze vipengele viwili vya watoto: Chix na Chiy. Tutavionyesha ndani ya muonekano wa kipengele Aaaa. Aaaa kitakuwa na lebo yake mwenyewe router-outlet, ambayo kulingana na URL itaonyesha ama kimoja, ama kipengele cha pili cha mtoto.

Basi, hebu tutekeleze yaliyoelezewa.

Tutengeneze kipengele cha kwanza cha mtoto:

ng generate component chix

Tutengeneze kipengele cha pili cha mtoto:

ng generate component chiy

Tuandike njia tofauti za watoto:

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

Tuziongeze kwenye njia ya kipengele Aaaa kama watoto:

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

Njia kutoka kwenye njia ya kipengele cha mzazi itakuwa mwanzo wa njia ya kipengele cha mtoto. Hii inamaanisha kwamba vipengele vya watoto vitapatikana kupitia URL zifuatazo: /aaaa/chix na /aaaa/chiy.

Basi hebu sasa tuweke kipengele Aaaa. Tulete lebo ya uratibu wa anuwai:

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

Tuiandike kwenye kipambizo:

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

Tuingize lebo kwenye muonekano:

<p>inafanya kazi</p>
<router-outlet></router-outlet>

Sasa itawezekana kuomba vipengele vya watoto kupitia URL zao na vipengele hivi vitaonyeshwa. Jaribu!

Tekeleza kazi iliyoelezewa ya vipengele vya watoto.

Tengeneza viungo, ambavyo vitabadilisha vipengele vya watoto.