我正在嘗試創建一個可重用的組件。我的期望是 masDisabled 的值在未設定為 false 或 true 時將始終為 true。我仍然想要這樣的 masDisabled 構造，而不是 [masDisabled]。但是我有一個問題，所有沒有 masDisabled 屬性的組件也都被禁用了。如何解決？
test.component.html
<mas-button masDisabled></mas-button>
button.component.html
<button type="button" class="btn btn-primary" [disabled]="disabledMas"></button>
button.component.ts
disabledMas = true;
@Input('disabledMas')
get masDisabled(): boolean {
return this.disabledMas;
}
set masDisabled(value: boolean) {
this.disabledMas = value === false;
}
uj5u.com熱心網友回復：
您使用了錯誤的屬性名稱。你可以在這個 StackBlitz中看到你的 getter 和 setter 甚至沒有被擊中！
在您的組件中，它被稱為@Input('disabledMas')，但在您的組件模板中，您使用不同的名稱<mas-button masDisabled></mas-button>。
一旦你更正了，如果你沒有設定一個布林值，你會看到一個錯誤，所以你應該這樣做：
<mas-button [disabledMas]="true"></mas-button>
這是一個有效的StackBlitz。
看起來你根本不需要getter和setter，我認為這樣的事情會起作用：
@Input() disabledMas = false;
[disabled]="!disabledMas"
這是一個有效的StackBlitz演示。
編輯：
由于您希望您的默認（屬性不存在）可見，我們將默認disabled為 false。
由于您不想傳遞值，因此傳遞的值將是一個空字串。因此，我們可以使用 setter 與空字串進行比較以確定它是否為disabled：
isDisabled = false;
@Input() set masDisabled(value: string) {
this.isDisabled = value === '' || value === 'true';
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/508166.html
標籤：javascript 节点.js 有角度的 打字稿 rxjs
下一篇：有沒有辦法減少條件？