Question

正在构建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指向当前路线，则想法是将true设置为routerLink。我知道这可以通过注入ActivatedRoute并构建一个函数来实现，该函数采用按钮的routerLink的值并在与当前路线匹配的情况下返回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分配的类名，本身并没有JS / TS代码。

解决方案：

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

Angular：基于活动routerlink的绑定模板var的干净方法

2 个答案: