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

【问题标题】：How can access to routerLink value via custom directive?如何通过自定义指令访问 routerLink 值？
【发布时间】：2021-11-27 19:09:02
【问题描述】：

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

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

附注：有一个属性可以保存 routerlink 值

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

但不能通过自定义指令访问。

【问题讨论】：

nativeElement.attributes["ng-reflect-router-link"].value 也可以在生命周期钩子中访问，我可以使用它：D

标签： angular angular-directive angular-routerlink

【解决方案1】：

它应该可以作为 Input 属性和生命周期挂钩访问

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

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

  ...
}

【讨论】：

感谢您的快速回复。但它不起作用检查它link
@user3910994 您需要在 init 生命周期钩子中访问它，它可能在构造函数中不可用。相应地更新了 sn-p 供您参考。
谢谢。这是工作

【解决方案2】：

您可以在ngOnChanges Lifecycle hook 中的指令中访问路由器链接。

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

【讨论】：

感谢您的回答