小编Hrv*_*cic的帖子
Angular - 如何在销毁组件后从<head>中删除<style>元素
注意:我在Angular 5和Angular 6中都尝试了这个例子.
问题
如果'encapsulation: ViewEncapsulation.None'在Angular组件上使用,则<style>元素将附加到<head>何时显示组件.<style>即使在组件被销毁之后,该元素也永远不会被删除.这是问题所在.随着展示的组件越来越多,其中的<style>元素越来越多<head>.最终,当存在针对相同html元素的全局css规则时,这会导致冲突,例如body,根据我的示例.<style> 即使最后一个<style>块属于不再存在的组件,也只使用最后附加的块中的CSS .
我想看到一个适当的解决方案,从DOM中删除<style>一些组件附带的元素.例如,当onDestoy触发组件的功能时进行清理.
我是Angular的新手,我偶然发现了这个有趣的行为.很高兴知道是否有一个简单的解决方法.
例
示例:https: //stackblitz.com/edit/angular-ukkecu
在我的应用程序中,我有3个包装器组件,它们将是我的应用程序的根元素.当时只会显示一个.显示的组件将确定整个网站的主题.它应该包括全局样式,更具体地说是全局样式(主题)的专用变体.因此他们都有'encapsulation: ViewEncapsulation.None'.每种全局样式都有自己编译的bootstrap变体和其他基于SASS变量的外部插件.因此,在这里进行封装是没有选择的,这些是全局样式和插件.
该解决方案仅在第一次正常工作,直到显示其他组件并将<style>元素附加到<head>.之后,仅使用最后使用的组件中的样式,因为它<style>最后一个并覆盖任何以前的样式.
可能的解决方案
似乎唯一的解决方案是重新加载页面,或者不使用组件来切换全局主题.
推荐指数
解决办法
查看次数
如何选择除特定元素之外的所有元素及其所有后代
更新：这可能是不可能的。我仍在寻找解决方案。
我需要创建一个CSS选择器来选择所有页面元素，使用*这些.exception元素将排除元素及其所有后代（！）。此.exception元素及其后代需要保留其初始样式，而*样式应应用于所有其他页面元素。
重要说明：如果首先将任何样式应用于.exception及其子代，然后我需要手动将其覆盖为其初始值，则解决方案不好！我根本不想对.exception和/或其后代应用任何样式！
所需结果
请记住，这只是一个简单的例子。我需要在其中应用解决方案的页面包含更多元素，因此我需要用于过滤元素的通用解决方案。在那里无法进行手动选择和覆盖元素。
http://jsfiddle.net/zV5gf/2/（初始状态，无解决方案）
解决方案：not选择器-不完美
此解决方案不够好，因为它将排除li.exception，但不会排除其后代。li.exception后代的初始样式将丢失。
*:not(.exception){
background-color:orange !important;
}
并且div.exception及其后代的逻辑解决方案不起作用（浏览器不支持）：
*:not(.exception *){
background-color:orange !important;
}
推荐指数
解决办法
查看次数