Định dạng liên kết hoạt động trong Angular

Có thể làm sao cho các liên kết mà URL của chúng khớp với thanh địa chỉ, được đánh dấu bởi một kiểu nào đó, ví dụ như màu sắc. Để làm điều này, Angular có sẵn một thuộc tính đặc biệt RouterLinkActive.

Hãy xem nó hoạt động như thế nào. Đầu tiên hãy import nó:

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

Khai báo trong decorator:

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

Và bây giờ thêm thuộc tính này vào các liên kết của chúng ta:

<nav>
	<a
		routerLink="/aaaa-component"
		routerLinkActive="active"
	>
		Aaaa Component
	</a>
	<a
		routerLink="/bbbb-component"
		routerLinkActive="active"
	>
		Bbbb Component
	</a>
</nav>

Như bạn thấy, trong ví dụ của chúng ta giá trị của thuộc tính là active. Đây là tên của lớp CSS sẽ được áp dụng cho liên kết hoạt động. Bây giờ chúng ta có thể định dạng chúng theo ý muốn:

.active {
	color: red;
}

Định dạng các liên kết hoạt động trong dự án của bạn.