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

【问题标题】：How to remove ViewEncapsulation.None after the component destroyed组件销毁后如何删除 ViewEncapsulation.None
【发布时间】：2020-11-24 10:17:45
【问题描述】：

我尝试使用 ViewEncapsulation.None 将背景颜色插入到 kendo-grid-column 中，因为我找到了here，但是我的本地 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;}
...

对不起，我的英语很差。

【问题讨论】：

你可以给你的网格一个 id，所以你可以使用 #gridId k-grid tr.deactivated 而不是 k-grid tr.deactivated 这只会影响其他具有相同 id 的网格
如果只想改变剑道的背景颜色，你可以把剑道的.css文件移动到你的“styles.css”文件中（你在你的“styles”标签中定义的文件） angular.json) 并且不在您的组件中使用 ViewEncapsulation.None

标签： javascript angular typescript kendo-ui kendo-grid

【解决方案1】：

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

你可以使用

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

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

对于角度概念，请遵循组件样式 - component-styles

【讨论】：

通过使用 :host ::mg-deep .k-gird tr.deactivate { background-color: #e5e5e5 }，现在我的项目工作了，谢谢你的帮助.
@Traly 如果您能将我的答案标记为正确答案并点赞，这样其他人就可以知道这是正确答案，那就太好了：)
我想投票给你的答案，但我不能，因为我没有足够的声誉。
@Traly 很好，现在有人可能会觉得它有帮助