Angular：基于活动路由器链接绑定模板变量的干净方法

Question

构建一个 Angular 4 应用程序，但我会接受一个也适用于 v5+ 的答案。我有一个由这样的导航按钮组成的导航栏：

<custom-button routerLink="/some-route"></custom-button>

我知道我可以根据当前路由是否与按钮的routerLink 匹配，向元素添加自定义类"active"：

<custom-button routerLink="/some-route" routerLinkActive="active"></custom-button>

但是我需要一种方法来根据此条件（路由是否为当前）绑定输入值，例如：

<custom-button routerLink="/some-route" [inputFlag]="isOnCurrentRoute">
</custom-button>

所以这个想法是如果按钮的routerLink 指的是当前路线，那么inputFlag 将被设置为true。我知道这可以通过注入ActivatedRoute 并构建一个函数来实现，该函数采用按钮的routerLink 的值并在它与当前路由匹配时返回true。

<custom-button routerLink="/some-route" 
  [inputFlag]="isOnCurrentRoute('/some-route')">
</custom-button>

不过，这是很多开销；想知道 Angular 是否在模板中公开了一个 API 来完成所有这些工作

Answer 1

所以我一直在考虑它，如果 Angular 确实具有执行您正在寻找的功能的功能 routerLinkActive 属性与 routerLink 结合使用，我们可以使用它在模板本身中破解一点，而无需 JS /TS 代码，通过检查由routerLinkActive 分配的类名。

解决方案：

<custom-button #customBtn
  routerLink="/some-route" 
  routerLinkActive="active"
  [inputFlag]="customBtn.classList.contains('active')"
></custom-button>

Answer 2

你可以像这样定义函数isOnCurrentRoute

import { Router } from '@angular/router';
import { map, filter } from 'rxjs/operators';

constructor(private router: Router) {}

isOnCurrentRoute(path): Observable<boolean> {
  return this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    map(event => event.url === path)
  );
}

并通过异步管道在模板上使用它

<custom-button routerLink="/some-route" 
  [inputFlag]="isOnCurrentRoute('/some-route') | async">
</custom-button>

希望对你有帮助