javascript - Angular:使用指令禁用材质按钮不起作用
问题描述
我想通过指令禁用一些按钮(向按钮添加禁用属性)。
该指令适用于经典的 html 按钮,但不适用于Angular Material Design 按钮(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
解决方案
如果您将 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');
}
}
推荐阅读
- ajax - Spring boot,Thymeleaf,Ajax,从ajax获取空对象
- python - 单击按钮时如何弹出不同的名称?
- http - 来自python程序的http请求的假Referer源
- javascript - 异步函数返回未定义
- javascript - 如何在 JavaScript 中动态获取嵌套对象属性的值?
- macos - 外部驱动器上的 OSX Apache 网页不起作用
- stm32 - Hardfault_handler 与 stm32f103
- amazon-web-services - AWS CDK 使用自定义源将生命周期更新/添加到现有 S3 存储桶
- html - 更改选中时看起来像按钮的复选框的背景颜色
- java - 在Java中添加到列表后清除HashMap