角材料垫按钮不会更新外部指令的禁用更改

Posted 2023-02-22

【中文标题】角材料垫按钮不会更新外部指令的禁用更改

【英文标题】：Angular material mat-button doesn't update the disabled change from outer directive

【发布时间】：2021-08-08 20:47:20

【问题描述】：

我有一个简单的自定义指令需要禁用该元素。

<button mat-button [myCustomDirective]="'mode1'">Edit</button>

@Directive(
  selector: '[myCustomDirective]'
)
export class MyCustomDirective implements OnInit 
  @Input() myCustomDirective: string;

  @Input()
  @HostBinding('disabled')
  public disabled: boolean;

  constructor(
    private el: ElementRef,
    private cd: ChangeDetectorRef
  ) 

  ngOnInit() 

    switch (this.myCustomDirective) 
      case 'mode1':
        this.disabled = true;
        this.el.nativeElement.disabled = true;

        setTimeout(() => 
          this.cd.markForCheck();
          this.cd.detectChanges();
        );

        break;

      default:
        this.el.nativeElement.remove();

        break;
    
  

DEMO

即使 disabled 属性出现在 DOM 中，ma​​t-button 也不会完全更新（禁用的样式丢失了，因为一些禁用的类DOM 中也缺少 ma​​t-button 的角度材料）。所以 ma​​t-button 不会更新。对此有何建议？

【参考方案1】：

你的 stackblitz 和问题是不同的。我已经对您要查找的内容做出了最好的猜测。

答案here 使用AfterViewInit 有效。

你还需要添加类mat-button-disabled

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

@Directive(
  selector: '[appHasPermissions]'
)
export class HasPermissionsDirective implements AfterViewInit 
  @Input() myCustomDirective: string;

  constructor(private el: ElementRef, private renderer: Renderer2) 
    // try with Renderer2
    this.renderer.setProperty(this.el.nativeElement, 'disabled', true);
  

  ngAfterViewInit() 
    switch (this.myCustomDirective) 
      case 'mode1':
        // try with ElementRef
        this.el.nativeElement.disabled = true;
        this.renderer.addClass(this.el.nativeElement, 'mat-button-disabled');
        break;
      default:
        this.el.nativeElement.remove();
        break;
    
  

<button 
  appHasPermissions
  [myCustomDirective]="'mode1'"
  mat-raised-button
  color="warn">
    From directive
</button>

Stackblitz

【讨论】：

感谢您的回复，所以这仅在这种情况下有效，但是如果材料框架对 进行其他 DOM 操作怎么办？添加一个简单的类是不够的。我期待在修改 @HostBinding 变量时触发内部 mat-button [disabled] 功能并自动放置 .mat-button-disabled 类

@que1326 “但是如果 Material 框架执行其他 DOM 操作会怎样”......它没有。你可以查看github