組件銷毀后如何刪除ViewEncapsulation.None

Question

我嘗試使用ViewEncapsulation.None將背景顏色插入到劍道網格列中，如我在此處找到的那樣，但是我的本地 CSS 變成了全局 CSS，因此它會影響其他組件。 請告訴我如何僅將其設置為本地或在組件銷毀后將其刪除。

這是我的代碼：

xxx.component.ts

...
@Component({
  selector: 'app-gnb6100',
  templateUrl: './xxx.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./xxx.component.css']
})
...
rowCallback(context: RowClassArgs){
  if (context.dataItem.serviceStatusDesc === 'Deactivated'){
    return { deactivated: true };
  } else {
    return {};
  }
}
...

xxx.component.html

...
<kendo-grid  
    scrollable="virtual"
    [data]="data"
    [sortable]="true"
    [sort]="sort"
    [rowClass]="rowCallback"
    [resizable]="true"
    [reorderable]="true"
>
    <kendo-grid-column width="100" class="cen" field="userID" title="ID" ></kendo-grid-column>
    <kendo-grid-column width="100" field="userName" title="Username"></kendo-grid-column>
</kendo-grid>
...

xxx.component.css

...
.k-grid tr.deactivated{ background-color: #e5e5e5;}
...

對不起，我的英語不好。

Answer 1

嗨，如果您只需要設置背景顏色，請不要將視圖封裝設置為無！

您可以使用

:host ::ng-deep .k-grid tr.deactivated{
  background-color: #eef;
}

以下示例將背景顏色樣式應用於全局具有 CSS 類 .k-grid tr.deactivated 的相關元素。

對於角度概念，請遵循組件樣式 - component-styles