Question

我有一个名为userPermission的属性指令，应该执行一些逻辑，然后将禁用的属性设置为附加的元素。 <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");

这些技术都不起作用。

如何使用属性指令将“禁用”按钮设置为禁用？

Answer 1

使用模板ref来动态禁用Button或另一种方法是使用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

panel

为我工作。

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

Answer 3

经过大量研究，我找到了解决方案。虽然这很晚才回答，但可能对其他人有用。我通过添加具有以下样式的类使其工作：

.disable-ctrl {

  pointer-events: none !important;

}

然后在指令本机元素中的上面的类中添加如下内容：

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

通过此操作，我可以使用指令禁用应用程序中的所有控件。

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

该值可以是“ disabled”，“ x”，“ freedom！”，“ anything”，“ false”等任何其他值

启用按钮：

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

使用属性指令禁用了功能键设置吗？

5 个答案: