在Angular中，如何检查相对路径是否处于活动状态？

Question

我导航到相对于当前路线的组件代码中的路线，如此代码段所示。

this.router.navigate([item.route], {relativeTo: this.route});

如何检查当前路径在HTML中是否处于活动状态以应用突出显示样式。目前，我正在使用以下内容，但它不适用于相对路线。

<a [ngClass]="{'active': item.route ? router.isActive(item.route, true): false">
{{item.displayName}}
</a> 

Answer 1

这就是我要使其工作的方式。如果有更好的解决方案，请随时鸣叫。

BindJoinTable(ModelBuilder, Table1, Table2, JoinTable)

Answer 2

您可以像这样将函数放入组件中：

isActive(): boolean {
    return router.isActive(router.createUrlTree([item.route], {relativeTo: route}).toString(), true);
  }

然后，您可以在模板中编写以下内容：

<a [ngClass]="{'active': isActive() }">{{item.displayName}}</a>