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

Question

我想知道是否有一个像 routerLinkActive 一样工作的原生 Angular 指令，但会根据分配的保护检查路由是否可以激活。

为了澄清说我定义了以下路线：

{ 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

模板：

<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
}

样式

.link-disabled {
  pointer-events: none;
  opacity: 0.5;
}