我有一个bottomNavigation,它通过改变样式来告诉我们正在点击哪条路线。
这是我的底部导航模板
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
时,当我返回同一路由时,ngClass不作为active-item
工作。
我检查了buttonActivated.value
的值,当我在父路由上单击后退时,buttonActivated.value
的值正确更改,但ngClass仍然没有更改。
先谢谢你
1条答案
按热度按时间6rqinv9w1#
您可以使用routerLinkActive指令。
RouterLinkActive指令通过跟踪元素的链接路由当前是否活动来添加
.active
类,然后允许根据需要指定CSS。