如何在组件销毁后删除 ViewEncapsulation.None

Question

我尝试使用 ViewEncapsulation.None 向 kendo-grid-column 插入背景色，正如我发现的那样 here，但是我的local 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

您好，如果您只需要设置背景颜色，请不要将视图封装设置为 none！

你可以使用

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

以下示例将背景颜色样式应用于全局具有 CSS class .k-grid tr.deactivated 的相关元素。

对于 angular 概念遵循组件样式 - component-styles

如何在组件销毁后删除 ViewEncapsulation.None

How to remove ViewEncapsulation.None after the component destroyed

javascript

kendo-ui

typescript

kendo-grid

angular