如何通过自定义指令访问 routerLink 值？

Question

我如何创建自定义指令（例如 appCheckPermission ）来检查用户是否可以查看 link 或基于应用于该元素的 routerLink 的按钮。

<button [routerLink]="['/users/edit', userId]" appCheckPermission ></button>

p.s: 有一个属性保存路由器link 值

nativeElement.attributes["ng-reflect-router-link"].value

但无法通过自定义指令访问。

Answer 1

它应该可以作为 Input 属性访问并且在生命周期挂钩中

@Directive({ selector: '[appCheckPermission]' })
export class AppCheckPermissionDirective implements OnInit {
  @Input() routerLink: any;

  ngOnInit(): void {
    console.log(this.routerLink);
  }

  ...
}

Answer 2

您可以在 ngOnChanges 生命周期钩子中的指令中访问路由器 link。

import { Directive, Input, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[appCheckPermission]',
})
export class CheckPermissionDirective implements OnChanges {
  @Input() routerLink: any;

  constructor() {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes && changes.routerLink) {
      console.log(changes.routerLink.currentValue);
    }
  }
}

如何通过自定义指令访问 routerLink 值？

How can access to routerLink value via custom directive?

angular-directive

angular

angular-routerlink