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

Question

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

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

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

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

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

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

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

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

虽然开销很大；想知道 Angular 是否公开了一个 API 来完成模板中的所有操作

Answer 1

您可以像这样定义函数 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>

希望对您有所帮助

Answer 2

所以我一直在考虑它，如果 Angular 确实有一个功能可以做你正在寻找的 routerLinkActive 属性结合 routerLink 我们可以用它来破解通过检查由 routerLinkActive.

分配的 class 名称，仅在模板本身中没有 JS/TS 代码

解决方案：

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

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

Angular: clean way to bind template var based on active routerlink

routing

routerlinkactive

angular

angular-routerlink