防止 CSS 样式在 Angular 应用程序之外应用

【问题标题】：Prevent CSS styles apply outside of angular application防止 CSS 样式在 Angular 应用程序之外应用
【发布时间】：2019-12-16 13:54:50
【问题描述】：

我有一个运行 angularjs 和 angular 的 SPA。我正在为 angularjs 和 angular 使用剑道库。在我的角度组件中，如果我设置封装：ViewEncapsulation.None，它会影响 angularjs 的 kendo css。任何阻止它并将css仅应用于角度组件的方法

【问题讨论】：

可以设置封装：ViewEncapsulation.shadowDom ..?
没有 shadowDom 导致角度动画中断。

标签： angular kendo-ui

【解决方案1】：

组件上的 'encapsulation: ViewEncapsulation.None' 将在组件被渲染时附加到<head>。因此，您可以利用生命周期方法 ngOnInit 和 ngOnDestroy 在组件中有条件地添加或删除 CSS。

示例 sn-p

const createElem = document.createElement('style');
createElem.textContent = "angularcss.css";

ngOnInit() {
   document.head.appendChild(createElem);
}
ngOnDestroy(){
   document.head.removeChild (createElem);
}

【讨论】：