Verwendung von Routenparametern in der Komponente in Angular

Lassen Sie uns nun einen Blick darauf werfen, wie wir Routenparameter innerhalb der Komponentenklasse verwenden können.

Angenommen, wir haben die folgende Route mit Parametern:

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

Angenommen, wir haben Links, um zu dieser Komponente mit verschiedenen Parametern zu navigieren:

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

Angenommen, die untergeordnete Komponente enthält das folgende Array:

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

export class AaaaComponent {

}

Lassen Sie uns je nach Wert des Routenparameters das entsprechende Element aus dem Array abrufen:

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

Lassen Sie uns das erhaltene Element in der View ausgeben:

Wert: {{ value }}

Angenommen, in der untergeordneten Komponente ist das folgende Array von Objekten gespeichert:

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

Erstellen Sie eine Route mit einem Parameter. Lassen Sie sich abhängig vom Wert des Parameters die Daten eines der Benutzer in der View anzeigen.