Χρήση παραμέτρων διαδρομών σε ένα στοιχείο στο Angular

Ας δούμε τώρα πώς μπορούμε να χρησιμοποιήσουμε παραμέτρους διαδρομών μέσα στην κλάση ενός στοιχείου.

Ας υποθέσουμε ότι έχουμε την ακόλουθη διαδρομή με παραμέτρους:

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

Ας υποθέσουμε ότι έχουμε συνδέσμους για μετάβαση στο συγκεκριμένο στοιχείο με διάφορες παραμέτρους:

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

Ας υποθέσουμε ότι στο θυγατρικό στοιχείο περιέχεται ο ακόλουθος πίνακας:

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

export class AaaaComponent {

}

Ας λάβουμε ανάλογα με την τιμή της παραμέτρου διαδρομής το αντίστοιχο στοιχείο του πίνακα:

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

Ας εμφανίσουμε το στοιχείο που λάβαμε στην προβολή:

τιμή: {{ value }}

Ας υποθέσουμε ότι στο θυγατρικό στοιχείο αποθηκεύεται ο ακόλουθος πίνακας αντικειμένων:

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

Δημιουργήστε μια διαδρομή με παράμετρο. Ας υποθέσουμε ότι ανάλογα με την τιμή της παραμέτρου στην προβολή εμφανίζονται τα δεδομένα ενός από τους χρήστες.