Gebruik van roeteparameters in komponent in Angular

Laat ons nou kyk hoe ons roeteparameters binne die klas van die komponent kan gebruik.

Kom ons neem aan ons het die volgende roete met parameters:

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

Kom ons neem aan ons het skakels om na hierdie komponent te navigeer met verskillende parameters:

<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>

Kom ons neem aan die kindkomponent bevat die volgende array:

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

export class AaaaComponent {

}

Laat ons, afhangende van die waarde van die roeteparameter, die ooreenstemmende element van die array kry:

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

Laat ons die verkrygde element in die view vertoon:

waarde: {{ value }}

Kom ons neem aan daar word die volgende array van objekte in die kindkomponent gestoor:

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

Maak 'n roete met 'n parameter. Laat die data van een van die gebruikers, afhangende van die waarde van die parameter, in die view vertoon word.