ngClass在路由事件中未更改

Question

我有一个底部导航，它通过更改样式来告诉我们要单击的路线。

这是我的底部导航模板的模板

class="menu-icon"
[ngClass]="{ 'active-item': buttonActivated.value == '/my-goal'}"
[ngClass]="{ 'active-item': buttonActivated.value == '/my-goal/goal-detail'}"
>

这是我的TS文件

buttonActivated: BehaviorSubject<string> = new BehaviorSubject<string>('/')

constructor(private router: Router) {
this.router.events.subscribe(() => {
this.buttonActivated.next(this.router.url);
} }

所以逻辑是：每次路线改变或发生事件时，buttonActivated.value都会改变。根据该值，ngClass将更改为active-item。

当我点击/my-goal路由时，ngClass工作得很好，但当我点击他的子/my-goal/goal-detail/id时，当我回到同一路由时，ingClass不能作为active-item工作。

我检查了buttonActivated.value的值，当我点击返回父路由时，它正在正确更改，但ngClass仍然没有更改。

提前感谢

Answer 1

您可以使用routerLinkActive指令。

RouterLinkActive指令通过跟踪元素的链接路由当前是否处于活动状态来添加.active类，然后允许根据需要指定CSS。