时间戳

首页 > 解决方案 > Angular：基于活动路由器链接绑定模板变量的干净方法

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

问题描述

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

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

我知道我可以根据当前路由是否与按钮匹配，向元素添加一个自定义类“活动”routerLink：

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

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

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

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

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

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

标签： angularroutingangular-routerlinkrouterlinkactive

解决方案

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

希望这可以帮助

推荐阅读