使用属性指令禁用垫按钮设置？

Question

我有一个名为 userPermission 的属性指令，它应该执行一些逻辑，然后将 disabled 属性设置为它所附加的元素。 <button userPermission>Disable me with userPermission</button>

<button color="primary" (click)="onNewConfiguration()" userPermission>Add Configuration</button>
<button color="primary" mat-raised-button (click)="onNewConfiguration()" userPermission>Add Configuration</button>

mat-raised-button不适用于ElementRef或Renderer2

我不能使用<button mat-raised-button [disabled]="someVar"></button>

我必须使用属性指令。 我试过了

this.el.nativeElement.disabled = true;
this.renderer.setAttribute(this.el.nativeElement, 'disabled', 'disabled');
this.el.nativeElement.setAttribute("disabled", "true");

这些技术都没有奏效。

如何使用属性指令将 mat-button 设置为禁用？

Answer 1

使用模板引用动态禁用按钮或另一种方法是使用 ViewChild 获取按钮的引用，然后将 _disable 设置为 tru

 @ViewChild('ref2') ref2;

HTML

<div class="button-row">
  <button #ref mat-raised-button (click)="onNewConfiguration(ref)">Basic</button>

TS

将 _disabled 属性设置为 true 以禁用按钮

 onNewConfiguration(ref){
    ref._disabled=true;
  }

示例： https : //stackblitz.com/edit/angular-zdcz25

Answer 2

经过大量研究，我找到了解决方案。 虽然这已经很晚了，但可能对其他人有用。 我通过添加一个样式如下的类来使它工作：

.disable-ctrl {

  pointer-events: none !important;

}

然后在指令本机元素中添加上面的类，如下所示：

this.renderer.addClass(this.el.nativeElement, "disable-ctrl");

有了这个，我能够通过使用指令禁用我的应用程序中的所有控件。

Answer 3

this.el.nativeElement.disabled = true;

为我工作。

请参阅https://angular-rb5vmu.stackblitz.io ，在“获取数据”按钮中有一个指令：spinnerButton，它接收一个值（布尔值）以更改按钮文本并禁用它。

Answer 4

直接修改 Angular 6 中的 DOM

this.elem.nativeElement.querySelector(".button-row").xxx = 'yyy';

是一个安全问题。 不要这样做。

您必须使用 render2 对象。 那样：

this.render2.setProperty(this.elem.nativeElement.querySelector(".button-row"),'xxx', 'yyy');

那样禁用你的按钮：

this.render2.setProperty(this.elem.nativeElement.querySelector(".button-row"),'disabled', 'true');

该值可以是任何其他值，如“禁用”、“x”、“自由！”、“任何东西”、“假”等

要启用您的按钮：

this.render2.setProperty(this.elem.nativeElement.querySelector(".button-row"),'disabled', '');

该值必须为空。

Answer 5

我们可以简单地做到这一点

<button mat-button #matRef (click)="buttonMat(matRef)"></button>

buttonMat(matRef) {
    matRef.disabled=true;
}