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

【问题标题】：Make router link active on two different routes使路由器链接在两条不同的路由上处于活动状态
【发布时间】：2023-03-06 15:51:01
【问题描述】：

在角度方面，我如何在两条不同的路线上制作 routerlink active。即

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

当“仪表板”是路线时，将具有样式active。有没有办法让相同的链接在不同的 url 时设置为活动状态，例如“家”也是？

【问题讨论】：

我想我可以使用 ngClass 并拍摄组件中 url 的快照，如果快照包含我感兴趣的链接，则有条件地应用类“活动”。
看看这个问题：stackoverflow.com/questions/42554091/…
不是一回事。我不想打开这两个组件。只需将路由器链接设置为在多条路由上处于活动状态即可。
所以样式取决于2个路由，但routerlink只有1个重定向？
@JonasPraem 正确我在下面的答案中提出了一个解决方案，我认为可能有一个更“内置”的解决方案，但可能没有。

标签： angular

【解决方案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 中实现。

【讨论】：