Angular：使用指令禁用材质按钮不起作用

Posted 2023-03-13

【中文标题】Angular：使用指令禁用材质按钮不起作用

【英文标题】：Angular: disable material button with directive doesn't works

【发布时间】：2020-01-05 06:11:53

【问题描述】：

我想通过指令禁用某些按钮（向按钮添加禁用属性）。

该指令适用于经典 html 按钮，但不适用于 angular material design button (mat-button)：

import  Component, Directive, ElementRef, Renderer2  from '@angular/core';


@Directive(
  selector: '[myDisableButton]'
)
export class HideCantEditDirective 
  constructor(private el: ElementRef, private renderer: Renderer2) 
    // try with Renderer2
    this.renderer.setProperty(this.el.nativeElement, 'disabled', true);
    // try with ElementRef
    this.el.nativeElement.disabled = true;

    this.renderer.setStyle(this.el.nativeElement, 'border', '2px solid green');
  




@Component(
  selector: 'my-app',
  template: `
  <button mat-button myDisableButton (click)="onClick()">Material Button</button><br /><br />
  <button myDisableButton (click)="onClick()">Classic Button</button>`,
  styles: [ 'button:disabled  border: 2px solid red !important; ' ]
)
export class AppComponent  

  onClick()
    alert('ok');
  

输出：

查看 stackblitz： https://stackblitz.com/edit/angular-5xq2wm

【参考方案1】：

如果您将 mat-button 放置在 button 元素上，它将在内部将内容投影到 mat-button 组件中。因为它是投影的内容，所以您无法在构造函数中设置禁用 true。

试试 AfterViewInit

import  Component, Directive, ElementRef, Renderer2, AfterViewInit  from '@angular/core';


@Directive(
  selector: '[myDisableButton]'
)
export class HideCantEditDirective implements AfterViewInit 
  constructor(private el: ElementRef, private renderer: Renderer2) 
    // try with Renderer2
    this.renderer.setProperty(this.el.nativeElement, 'disabled', true);

  

  ngAfterViewInit()
   // try with ElementRef
    this.el.nativeElement.disabled = true;

    this.renderer.setStyle(this.el.nativeElement, 'border', '2px solid green');
  

Forked Example