我正在嘗試根據權限通過角度指令禁用按鈕和輸入欄位。我嘗試了幾種方法，但沒有幫助
if (this.permission==true) {
this.viewContainer.createEmbeddedView(this.templateRef);
} else {
const viewRootElement : HTMLElement = this.viewContainer.createEmbeddedView(
this.templateRef
).rootNodes[0];
viewRootElement.setAttribute('disabled', 'false');
}
uj5u.com熱心網友回復：
- 對于 Reactive Forms 的使用，您可以使用指令
@Directive({
selector: '[disableControl]'
})
export class DisableControlDirective implements OnChanges {
@Input() disableControl = false;
constructor(private ngControl: NgControl) {}
ngOnChanges(changes: SimpleChanges): void {
if (changes['disableControl'] && this.ngControl.control) {
const action = this.disableControl ? 'disable' : 'enable';
this.ngControl.control[action]();
}
}
}
現在您可以在輸入或按鈕上使用它
<input [formControl]="formControl" [disableControl]="disable">
<button (click)="disable = true">Disable</button>
<button (click)="disable = false">Enable</button>
- 對于通常的輸入，您應該只使用 [readonly] - 它既是反應性的又是有效的（請參閱此處
disabled解釋為什么不好）
uj5u.com熱心網友回復：
對于禁用的按鈕，您可以使用：
<button class="btn btn-primary" type="submit" [disabled]="disablebtn" (click)="submit()">Upload</button>
在 .ts 檔案中：
disablebtn:boolean=false;
submit(){
this.disablebtn=true;
}
對于輸入欄位，您可以使用：
<input type="text" [disabled]="true">
uj5u.com熱心網友回復：
首先：你想創建一個指令，它以按鈕和輸入為目標。
@Directive({
selector: 'input[dis], button[dis]',
})
下一步：你需要知道如何切換disable按鈕/輸入的狀態
this.render.setProperty(
this.el.nativeElement,
'disabled',
true //false
);
最后：在那個指令中，使用 yourpermission service來切換元素狀態，在本例中是禁用狀態。
this.perService.permission$
.pipe(
tap((hasPermission) => {
//get permission value and set the disable state
);
})
)
您可以在下面的鏈接中找到完整的作業代碼。
作業堆疊閃電戰
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/535093.html