Angular自定义DisableAfterClick指令无法控制mat-checkbox的disabled属性怎么办？

问题原因 #

mat-checkbox 是 Angular Material 封装的组件，它的禁用状态由自身的 @Input() disabled 属性控制，你直接操作 <mat-checkbox> 宿主元素的 DOM 属性/样式，并不会触发组件内部的状态更新，所以禁用逻辑不生效。普通原生 button 是 DOM 元素，直接修改属性就能生效，二者逻辑不同。

解决方案 #

修改指令，直接操作 MatCheckbox 组件实例的 disabled 属性即可，同时可以兼容原生按钮场景：

import {Directive, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Renderer2, Optional, Host} from '@angular/core';
import {Subscription} from 'rxjs';
// 导入MatCheckbox
import { MatCheckbox } from '@angular/material/checkbox';

@Directive({
  selector: '[disableAfterClick]'
})
export class DisableAfterClickDirective implements OnInit, OnDestroy {

  @Input('disableAfterClick') reenableButton: EventEmitter<boolean>;
  subscription: Subscription;

  constructor(
    private renderer: Renderer2,
    private el: ElementRef,
    // 可选注入MatCheckbox，原生元素没有该实例不会报错
    @Optional() @Host() private checkbox: MatCheckbox
  ) {
  }

  @HostListener('click')
  onClick() {
    // 优先处理组件场景
    if(this.checkbox) {
      this.checkbox.disabled = true;
    } else {
      // 原生元素走原有逻辑
      this.renderer.setProperty(this.el.nativeElement, 'disabled', true);
    }
    this.el.nativeElement.style.backgroundColor = 'yellow';
  }

  ngOnInit() {
    this.subscription = this.reenableButton.subscribe(value => {
      if (!value) {
        if(this.checkbox) {
          this.checkbox.disabled = false;
        } else {
          this.renderer.setProperty(this.el.nativeElement, 'disabled', false);
        }
        this.el.nativeElement.style.backgroundColor = 'red';
      }
    });
  }

  ngOnDestroy() {
    this.subscription && this.subscription.unsubscribe();
  }

}

如果需要同时兼容 PrimeNG 的 p-checkbox，只需要同理导入 PrimeNG 的 Checkbox 类，在构造函数中注入，再增加对应判断逻辑即可。

内容的提问来源于stack exchange，提问作者Martin