使路由器链接在两条不同的路由上处于活动状态

Question

在 angular 中，我如何active在两条不同的路线上建立routerlink 。IE

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

active当“仪表板”是路线时将具有样式。有没有办法让相同的链接在不同的网址（例如“home”）上也处于活动状态？

Answer 1

所以我为任何想做同样事情的人找到了一个解决方案。我不能保证这是最有效的解决方案。我使用 Router 检查 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 中实现。