Question

有没有办法在没有ViewEncapsulation.Native的情况下阻止全局样式流入子组件？

例如，我有一种全球风格。容器 { 背景：绿色 }

和一个组件

@Component({
  template: html,
  styleUrls: [url],
  selector: 'dynamic-lp',
  encapsulation: ViewEncapsulation.Emulated
})

该组件是一个动态添加的组件，具有可变的styleUrls和模板html，因此如果模板具有.container类，我不想继承绿色背景。

如果我将ViewEncapsulation.Emulated更改为ViewEncapsulation.Native所有工作都按预期工作，但我想知道是否有另一种方法可以达到我想要的效果，因为大多数浏览器还不支持Shadow Dom

更新

我找到了一个适合我的解决方案。将你的sass导入包装成“body：not（...）”赋值，如下所示

body *:not(.innerhtml-container) {
  @import 'bootstrap';
  @import 'someother-plugin';

  /* Components */
  @import 'components/loading-bar';
  @import 'components/textfield';
}

在组件模板周围添加一个容器类“innerhtml-container”。例如：

<div class="innerhtml-container"><div class="container">...</div></div>

这样就不会将css继承传递给子组件

Angular 2禁用子组件中的全局样式继承

0 个答案: