0

构建一个 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 来在模板中完成所有这些工作

4

2 回答 2

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>

希望这可以帮助

于 2019-09-05T20:47:32.957 回答
1

所以我一直在思考它，如果 Angular 确实有一个特性，可以routerLinkActive结合你正在寻找的属性来做，routerLink我们可以通过检查类名来使用它在模板本身而不是 JS/TS 代码中破解一点由 分配routerLinkActive。

解决方案：

<custom-button #customBtn
  routerLink="/some-route" 
  routerLinkActive="active"
  [inputFlag]="customBtn.classList.contains('active')"
></custom-button>
于 2019-09-09T08:18:59.127 回答