angular - 使路由器链接在两条不同的路由上处于事件状态

Question

在 Angular 上，我怎样才能在两条不同的路由上使 routerlink active。即

<li routerLinkActive="active"><a routerLink="dashboard">Dashboard</a></li>

当“仪表板”是路由时，将具有 active 样式。有没有办法让相同的链接在不同的 url 时被设置为事件的，例如还有“家”吗？

Answer 1

所以我为任何想做同样事情的人找到了解决方案。我不能保证这是最有效的解决方案。我像这样使用路由器检查 url 路径:

isDashboard: boolean;
ngOnInit() {
    this.router.events.filter(event => event instanceof NavigationEnd)
        .subscribe((event: NavigationEnd) => {
            if(event.url.includes('home')) {
                this.isDashboard = true;
            }
            else this.isDashboard = false;
        });
}

然后在链接上添加 [class.active]="isDashboard" 并保留属性，就像它们在我的问题中的链接上一样(您可以在此处添加您喜欢的任何链接)。完成工作，但我一直在寻找一种强度较低的解决方案，最好是只能在 DOM 中实现。