Các liên kết cho định tuyến trong Angular

Trong các bài học trước, chúng ta đã nhập URL vào thanh địa chỉ thủ công. Bây giờ hãy tạo các liên kết, khi nhấp vào sẽ hiển thị các thành phần khác nhau.

Để làm điều này, chúng ta sẽ tạo liên kết một cách đặc biệt. Vấn đề là chúng ta không cần chuyển hướng thực sự theo các liên kết. Chúng ta chỉ đơn giản muốn Angular hiển thị một thành phần khác, thay đổi URL trong thanh địa chỉ trình duyệt và đồng thời không làm mới trang.

Vì vậy, thay vì thuộc tính gốc href chúng ta sẽ sử dụng thuộc tính của Angular RouterLink.

Để làm điều này, chúng ta cần import nó:

import { RouterLink } from '@angular/router';

Khai báo trong decorator:

@Component({
	......
	imports: [RouterOutlet, RouterLink],
	......
})

Bây giờ chúng ta có thể tạo các liên kết của mình:

<nav>
	<a routerLink="/aaaa/">
		Aaaa
	</a>
	<a routerLink="/bbbb/">
		Bbbb
	</a>
</nav>

Tạo các liên kết để chuyển đổi giữa các thành phần của bạn.