RouterLinkActive cho RouterLink với tham số (/ động)

Question

RouterLinkActive không hoạt động khi sử dụng liên kết được tạo động khi điều hướng thông qua chính ứng dụng.

ví dụ: trong điều hướng hàng đầu của tôi, tôi có điều này;

<a [routerLink]=['user', currentUser.name] routerLinkActive='active'>{{currentUser.name}}</a> 

Trong khi phiên bản mã cứng sẽ hoạt động.

<a [routerLink]=['user','bob']>View Bobs Account</a> 

Một plunk cho điều này là ở đây; https://plnkr.co/edit/BYKMucE3Y75uJSpV5VWx?p=preview

Nhấp vào "John" và "Dynamic Router Link Name =" và "John" cả hai đều sẽ hoạt động. Điều này đôi khi hoạt động trên nhấp chuột đầu tiên, nếu có, sau đó nhấp lại vào "Trang chủ", nhấp lại vào "John", bạn sẽ chỉ thấy liên kết được mã hóa được đăng ký là hoạt động, mặc dù href giống hệt nhau.

Điều này có được thiết kế/không thể không? hoặc tôi thiết lập một cái gì đó không chính xác?

Answer 1

Thay đổi html của bạn như sau:

<a [routerLink]=['user', currentUser.name] routerLinkActive='active'>{{currentUser.name}}</a> 

Bạn cũng có thể kiểm tra Why Angular2 routerLinkActive sets active class to multiple links?

Answer 2

Trong thành phần của bạn:

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

isActive(instruction: any[]): boolean { 
    // Set the second parameter to true if you want to require an exact match. 
    return this.router.isActive(this.router.createUrlTree(instruction), false); 
} 

Trong HTML của bạn:

<a [class.active]="isActive(['user', currentUser.name])"> 

Router.isActive() documentation on angular.io

Answer 3

routerLinkActive được đánh giá khi tải ban đầu và chỉ khi tuyến đường được thay đổi. Nó không được đánh giá lại khi liên kết được thay đổi. Do đó, liên kết được tạo động không hoạt động với routerLinkActive. Giải pháp của Victor Bredihin ở trên hoạt động khi chức năng thành phần được đánh giá trong khi hiển thị.