Користење на параметри на рути во компонента во 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',
	},
]

Направете рута со параметар. Нека во зависност од вредноста на параметарот во претставата се прикажуваат податоците на еден од корисниците.