Sử dụng tham số định tuyến trong thành phần Angular

Bây giờ hãy xem cách chúng ta có thể sử dụng các tham số định tuyến bên trong lớp thành phần.

Giả sử chúng ta có đường dẫn sau với các tham số:

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

Giả sử chúng ta có các liên kết để điều hướng đến thành phần này với các tham số khác nhau:

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

Giả sử trong thành phần con có chứa mảng sau:

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

export class AaaaComponent {

}

Hãy lấy phần tử tương ứng của mảng tùy thuộc vào giá trị của tham số định tuyến:

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

Hãy hiển thị phần tử đã lấy được trong view:

giá trị: {{ value }}

Giả sử trong thành phần con lưu trữ mảng các đối tượng sau:

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

Hãy tạo một đường dẫn với tham số. Tùy thuộc vào giá trị của tham số, dữ liệu của một trong số các người dùng sẽ được hiển thị trong view.