angular - 使用 Angular 材质按钮时更新 Angular Element Ref 损坏
问题描述
我正在尝试通过指令更新按钮上的 disabled 属性。但是mat-raised-button
在按钮上有属性不会让按钮被设置为禁用。这是我的 HTML。
<button mat-raised-button color="primary" *hasPermission="PERMISSION_TYPES.Admin; justDisable: true" >
DISABLE USER
</button>
然后在我的结构指令中,我禁用了按钮。
@Directive({
selector: '[hasPermission]', // tslint:disable-line
})
export class HasPermissionDirective implements OnInit {
@Input() public hasPermission;
@Input() public hasPermissionJustDisable = false;
constructor(
private viewContainer: ViewContainerRef,
private templateRef: TemplateRef<any>,
private permissionService: PermissionValidationService,
private elementRef: ElementRef<any>) {
}
ngOnInit(): void {
this.checkPermission();
}
private checkPermission() {
this.permissionService.hasValidPermission(this.hasPermission)
.then((hasPermission) => {
if (!hasPermission && !this.hasPermissionJustDisable) {
this.viewContainer.clear();
return;
}
if (!hasPermission && this.hasPermissionJustDisable) {
this.viewContainer.createEmbeddedView(this.templateRef);
this.elementRef.nativeElement.nextElementSibling.setAttribute('disabled', 'disabled');
return;
}
this.viewContainer.createEmbeddedView(this.templateRef);
});
}
}
问题是,它不会禁用按钮..但是如果我删除了mat-raised-button
这样的:
<button *hasPermission="PERMISSION_TYPES.Admin; justDisable: true" >
DISABLE USER
</button>
然后该按钮被禁用。它必须与角度材料如何渲染这些有关。任何帮助,将不胜感激。
谢谢,
解决方案
我能够通过将禁用的设置包装成这样来解决它SetTimeout
:
if (!hasPermission && this.hasPermissionJustDisable) {
this.viewContainer.createEmbeddedView(this.templateRef);
// Timeout is required for some rendering quark with angular material buttons..
setTimeout(() => {
this.renderer.setAttribute(this.elementRef.nativeElement.nextElementSibling, 'disabled', 'disabled');
});
return;
}