如何根据保护响应设置routerLink DOM元素的样式

Question

我想知道是否有一个像routerLinkActive一样工作的本机角度指令，但会根据其指定的后卫来检查路线是否可以激活。

为明确起见，我定义了以下路线：

{ path: '1', component: RouteOneComponent, canActivate: [RouteOneGuard] }

还有一些看起来像这样的HTML：

<p [routerLink]="['1']" routerLinkActive="active">The Link</p>

当RouteOneGuard返回true时，是否存在可用于应用“已启用” css类的指令？像这样：

<p [routerLink]="['1']" routerLinkActive="active" canActivate="enabled">The Link</p>

还是我必须为此创建一个自定义指令？

Answer 1

模板：

<item name="windowNoTitle">true</item>

组件

<a
  [routerLink]="['1']"
  routerLinkActive="active"
  [ngClass]="{'link-disabled': isNotAllowed}">
  The Link
</a>

样式

get isNotAllowed(): boolean {
  return this.permissionService.isUserHasSomePermission(); // or canActivate method used in routes
}