如何在 Angular 中更改 kendo-ui 對話框的背景顏色

Question

我需要更改彈出窗口的背景顏色，我嘗試使用[ngStyle]屬性，但這導致了背景顏色的更改。
經過一番尋找，我發現將背景顏色屬性應用於 k 窗口 class 改變了彈出窗口的背景顏色，但我希望它根據條件改變。 我認為我們不能直接將 class 的定義添加到條件中，它只需要 class 的名稱。
有沒有其他方法可以更改彈出窗口的背景顏色。

我嘗試過這樣的事情。

<kendo-dialog [ngClass]="{'k-window{background-color:red}' : flag = true,'k-window{background-color:green}': flag = false">
</kendo-dialog>

Answer 1

為方便起見使用 ngClass 指令

<div [ngClass]="'example-class'"></div>

NgClass 還可以同時分配多個 static class 名稱：

<div [ngClass]="['example-class', 'other-class']"></div>

如果我們想根據條件切換 CSS 類，我們傳入 JavaScript object。 object 的鍵是 class 名稱，值代表條件。

<div
  [ngClass]="{
  'example-class': condition
}"
></div>

我們也可以使用ngClass根據多個條件分配多個CSS類。

<div
  [ngClass]="{
  'example-class': condition,
  'other-class': !condition
}"
></div>

在劍道對話框中試試這個

<div id="kendo-grid"> 
 <kendo-dialog>
</div>

在 CSS 文件中

#kendo-grid .kendo-grid{
 //CSS
}

Answer 2

經過一段時間嘗試不同的解決方案，我終於意識到我可以通過覆蓋全局 CSS 來更改 angular 中 kendo-ui 對話框的背景顏色。

我發現負責改變顏色的 class 是k-window-content

因此，我使用::ng-deep.k-window-content{ background-color: 'red'}覆蓋了它，我將這個 CSS class 放在我想要修改的組件內。

但很快我意識到，每當我從這個組件跳到另一個具有相同對話框的組件時，那個對話框的顏色也會發生變化，這是我不想要的。

解決方案
然后我找到了這個解決方案
:host::ng-deep.k-window-content { background-color: 'red'; }
通過將:host添加到 class 聲明中，我能夠限制所需組件的背景顏色的更改，而不會干擾其他組件中的對話框