Question

我正在处理角度6，我的指令有问题。我试图做的是实现一个指令，该指令将能够设置元素的disable属性的值。

例如，我可以拥有

@Directive({
  selector: '[permission]'
})
export class PermissionDirective implements OnInit {

 private userPermission: string[];

 @Input() permission: string[];

 constructor(
  private userServ: UserService,
  private element: ElementRef,
 ) { 

 }

 ngOnInit() {
  this.userPermission = this.userServ.getUserPermissions();
  this.updateView();
 }

 updateView() {
   this.element.nativeElement.disabled = this.checkPermission();
 }

 checkPermission() {
  return permission.every(elm => this.userPermission.includes(elm));
 }
}

在模板中，在一个简单的情况下，我会有类似的东西

<button [permission]="['permission1','permission2']">Confirm</button>

但是不幸的是，在某些情况下，模板中已经可以有这样的内容：

<button [disabled]="form.controls.pwd.errors" [permission]="['permission1','permission2']">Confirm</button>

这里的问题是我希望我的自定义指令具有将disable属性设置为false或true的优先级。发生的事情是，当该字段变为有效时，当form.controls.pwd.errors变为“ true”时，我的自定义指令“ permission”（将disable设置为false）在这里没有用。

那么，您对我如何做到这一点有任何想法，让自定义指令覆盖由angular提供的内置指令吗？

Answer 1

您可以 export 指令，以便可以在模板中直接使用它。这样做的好处是您可以编写表达式，也可以在模板中使用权限逻辑。

这是一个更新的示例，我已经删除了 disabled 属性的设置。您可以控制如何在模板中设置禁用属性。

@Directive({
   selector: '[permission]',
   exportAs: 'permission'
})
export class PermissionDirective implements OnInit {
   private userPermission: string[];
   @Input() permission: string[];

   constructor(private userServ: UserService) { }

   ngOnInit() {
       this.userPermission = this.userServ.getUserPermissions();
   }

   deny() {
       return this.permission.every(elm => this.userPermission.includes(elm));
   }
}

您现在可以将指令绑定到模板变量，如下所示：

<button #perm="permission"
        [disabled]="perm.deny()"
        [permission]="['permission1','permission2']">Confirm</button>

此外，您可以将模板中的属性绑定到该模板变量，如下所示：

<button #perm="permission"
        [disabled]="perm.deny() || form.controls.pwd.errors" 
        [permission]="['permission1','permission2']">Confirm</button>

自定义指令并覆盖另一个指令

1 个答案: