Angular 2：当在单独的组件中更改数据时，类绑定不会更新

Question

我尝试通过绑定active-item函数的返回值在我的NavBar组件的isActive()上添加下划线。 isActive()将网址路径与传入的字符串值进行比较，并返回true或false。

当我单击NavBar组件中的任何一项时，isActive()函数将运行，并且下划线将按预期显示在与我导航到的页面相对应的NavBar元素上。

但是，当我单击NavBar组件的外部标记 时，isActive()函数不会再次运行，因此下划线仍保留在上一页的navbar元素上：

NavBar HTML：

<div class="anchor-wrapper" [class.active-item]="isActive('/dashboard')"> 
    <a [routerLink]="['/dashboard']">Dashboard</a>
</div>
<div class="anchor-wrapper" [class.active-item]="isActive('/inventory')">
    <a [routerLink]="['/inventory']">Inventory</a>
</div>

NavBar TS：

isActive(path) {
    return (url.parse(window.location.href).pathname === path) ? true : false;
}

仪表板HTML：

<a (click)="onVehicleStatusClick()" RouterLinkActive="active"> {{promotedCount}} </a>

仪表盘TS：

onVehicleStatusClick(){
    this.router.navigate(['/inventory']);
}

当我导航到NavBar组件之外的另一条路线时，如何确保isActive()再次运行？

非常感谢Angular新手

Answer 1

您可以如下使用routerLinkActive指令：

NavBar HTML：

<div class="anchor-wrapper" routerLinkActive="isActive('/dashboard')"> 
    <a [routerLink]="['/dashboard']">Dashboard</a>
</div>
<div class="anchor-wrapper" routerLinkActive="isActive('/inventory')">
    <a [routerLink]="['/inventory']">Inventory</a>
</div

Docs