注意：我在Angular 5和Angular 6中都尝试了这个例子 .
问题
如果在Angular组件上使用 'encapsulation: ViewEncapsulation.None' ，则 <style> 元素将在显示组件时附加到 <head> . 即使在组件被销毁之后， <style> 元素也永远不会被删除 . 这是问题所在 . 随着显示的组件越来越多， <head> 中有越来越多的 <style> 元素 . 最终，当存在针对相同html元素的全局css规则时，这会导致冲突，例如 body ，根据我的例子 . 只使用最后附加的 <style> 块中的CSS，即使最后一个 <style> 块属于不再存在的组件 .
我想看到一个适当的解决方案，从DOM中删除与一些组件一起出现的 <style> 元素 . 例如 . 从组件触发 onDestoy 函数时清理 .
我是Angular的新手，我偶然发现了这个有趣的行为 . 很高兴知道是否有一个简单的解决方法 .
示例
示例：https://stackblitz.com/edit/angular-ukkecu
在我的应用程序中，我有3个包装器组件，它们将是我的应用程序的根元素 . 当时只会显示一个 . 显示的组件将确定整个网站的主题 . 它应该包括全局样式，更具体地说是全局样式（主题）的专用变体 . 出于这个原因，他们都有 'encapsulation: ViewEncapsulation.None' . 每种全局样式都有自己编译的bootstrap变体和其他基于SASS变量的外部插件 . 因此，在这里进行封装是没有选择的，这些是全局样式和插件 .
该解决方案仅在第一次正常工作，直到显示其他组件并将 <style> 元素附加到 <head> . 之后，将仅使用最后使用的组件中的样式，因为它的 <style> 位于最后并覆盖任何先前的样式 .
可能的解决方案
似乎唯一的解决方案是重新加载页面，或者不使用组件来切换全局主题 .
1 回答
不知道解决方案，但您使用它的组件的ViewEncapsulation.NONE属性不是默认属性默认值是ViewEncapsulation.Emulated我想假设哪个为组件中的每个标记提供唯一ID，因此解决了这些类型的问题那么你为什么使用ViewEncapsulation.NONE ???