"Angular - 如何動態禁用菜單項？"

Question

我很難讓菜單組件運行。 我希望能夠禁用一個菜單項，但我也不想在菜單的調用者\/用戶（這里是應用程序組件）中有太多的菜單邏輯。

所以我認為刷新或其他東西不會那么好？

我在菜單組件中使用 onPush，但我認為這不是問題。 即使在應用程序組件中使用不可變菜單項也無濟於事。 在構造函數中創建項目是我認為的問題，但我不知道如何做得更好。

應用程序組件中的復雜方式不會很好，因為菜單是以這種方式從菜單組件中使用的。

也許在 on() 調用后自動刷新項目可能是解決方案？ 但是怎么做？

或者我應該創建一個可觀察\/主題 isDisabled$ 並且每當在該主題（應用程序屬性）中定義的值我需要觸發 ChangeDetection？

或者我是否需要從 menuItems 中制作一個 Observable 並通過異步管道將它們提供給 menuItem？

有人給點小費嗎？ （在最好的情況下，一個好的最佳實踐：D）

或者有沒有特殊的CDK方式來做到這一點？ 我知道有一個禁用指令，但我認為我會遇到與 menu-item.disabled 屬性相同的問題

Answer 1

查看您如何使用 href <a><\/code>設計菜單組件，您將不得不使用樣式來禁用項目。只需為每個帶有disabled<\/code>謂詞的項目添加一個ngClass<\/code>屬性即可。

模板應包含以下內容：

<a *ngIf="node.on" (click)="node.on()" [ngClass]="{'disabled-item':node.disabled()}"> {{node.name}} </a>