Matumizi ya Vigezo vya Njia katika Sehemu ya programu ya Angular

Wacha sasa tuangalie jinsi tunaweza kutumia vigezo vya njia ndani ya darasa la sehemu ya programu.

Wacha tuwe na njia ifuatayo na vigezo:

const routes: Routes = [
	{ path: 'aaaa/:id', component: AaaaComponent },
	{ path: 'bbbb', component: BbbbComponent },
];

Wacha tuwe na viungo vya kuhama kwenye sehemu hii ya programu na vigezo tofauti:

<nav>
	<a
		routerLink="/aaaa/1"
		routerLinkActive="active"
	>
		1
	</a>
	<a
		routerLink="/aaaa/2"
		routerLinkActive="active"
	>
		2
	</a>
	<a
		routerLink="/aaaa/3"
		routerLinkActive="active"
	>
		3
	</a>
</nav>

Wacha sehemu ndogo ya programu iwe na safu ifuatayo:

let arr: string = [
	'a', 'b', 'c', 'd', 'e'
];

export class AaaaComponent {

}

Wacha kulingana na thamani ya kigezo cha njia tupate kipengele kinachofanana cha safu:

export class AaaaComponent {
	constructor(private activateRoute: ActivatedRoute) {
		let params = activateRoute.snapshot.params;
		let id = params['id'];
		
		this.value = arr[id];
	}
}

Wacha tuonyeshe kipengele kilichopatikana kwenye muonekano:

thamani: {{ value }}

Wacha sehemu ndogo ya programu ihifadhi safu ifuatayo ya vitu:

[
	{
		name: 'user1',
		surn: 'surn1',
	},
	{
		name: 'user2',
		surn: 'surn2',
	},
	{
		name: 'user3',
		surn: 'surn3',
	},
]

Tengeneza njia na kigezo. Wacha kulingana na thamani ya kigezo kwenye muonekano data za moja ya watumiaji zionyeshe.