视图封装问题angular5

Question

我想将CSS应用到从父组件调用的子组件上，使用技巧它工作得很好。

封装: ViewEncapsulation.None

但是，当我导航到其他路径或页面时，它会选择组件的样式，该组件的封装没有任何奇怪的行为。

即当我到达路线http://localhost:4200/example时

示例组件具有

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  encapsulation: ViewEncapsulation.None

})

在这条路线上还有另外两个组件

example.component.html

<app-example1></app-example1>

<app-example2></app-example2>

css适用于各自的孩子。

但是当我点击example2时，它也会选择example1的css。

@Component({
      selector: 'app-example2',
      templateUrl: './example2.component.html',
      styleUrls: ['./example2.component.css'],


    })

当我删除封装属性时，它不会选择example2路由

或者当我直接访问路由http://localhost:4200/example2时

它工作得很好，css只拿起example2 css，但是当我导航到example1并导航到example2时。

它选择示例1组件的样式，因为

 encapsulation: ViewEncapsulation.None

当我移除该属性或直接访问该路由时，它工作正常，我不知道它为什么会这样做，究竟是什么问题？

example1和example2是两个不同的模块，有自己的路由。

Answer 1

视图封装定义了组件中定义的模板和样式是否会影响整个应用程序，反之亦然。

对于ViewEncapsulation ，无样式-来自组件的样式传播回主，因此对页面上的所有组件都是可见的。小心应用程序中没有任何组件和本机组件。所有没有封装的组件都会在所有组件中复制它们的样式。

如果删除ViewEncapsulation属性，则将采用默认属性，即模拟的

在这种情况下，主HTML样式传播到组件。此组件的@组件装饰器中定义的样式仅限于此组件。

Answer 2

简单的旧css黑客

将像.app-component这样的唯一类添加到组件的最上面的元素中，并确保所有其他样式都是该类的子元素。

如果您正在使用任何类型的css预处理程序，则更好。

信息：

使用ViewEncapsulation.None，时，定义的样式将使用head元素中的样式标记添加到html页面。

所以按照古老的惯例，你的风格就会层出不穷。

因此，当你有时间投入你的时间在css样式的惯例，如边界元或其他东西。

再见！