我想通过指令禁用一些按钮(向按钮添加禁用属性)。
该指令适用于经典 html 按钮,但不适用于角形材质设计按钮(mat-button) https://material.angular.io/components/button/overview:
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');
}
}
Output:
请参阅 stackblitz:https://stackblitz.com/edit/angular-5xq2wm https://stackblitz.com/edit/angular-5xq2wm
如果将 mat-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');
}
}
分叉示例 https://stackblitz.com/edit/angular-mwndnm
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)