Gebruik van routeparameters in een component in Angular

Laten we nu bekijken hoe we routeparameters kunnen gebruiken binnen de klasse van een component.

Stel dat we de volgende route hebben met parameters:

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

Stel dat we links hebben om naar deze component te navigeren met verschillende 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>

Stel dat in de child-component de volgende array staat:

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

export class AaaaComponent {

}

Laten we, afhankelijk van de waarde van de routeparameter, het overeenkomstige element uit de array halen:

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

Laten we het verkregen element weergeven in de template:

waarde: {{ value }}

Stel dat in de child-component de volgende array met objecten wordt opgeslagen:

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

Maak een route met een parameter. Laat, afhankelijk van de waarde van de parameter, de gegevens van een van de gebruikers in de template worden weergegeven.