查看封装问题 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 无 - 来自组件的样式会传播回主 HTML，因此对页面上的所有组件都是可见的。小心应用程序中包含 None 和 Native 组件的应用程序。所有使用 None 封装的组件的样式都会在所有组件中重复。

如果您删除 ViewEncapsulation 属性，那么它将采用默认的 Emulated

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

Answer 2

简单的旧 css hack

添加一个独特的类，如 .app-component 到组件的最顶层元素，并确保所有其他样式都是此类的子元素。

如果您使用任何类型的 css 预处理器，那就更好了。

信息：

当使用 ViewEncapsulation.None 时，定义的样式会使用 head 中的 style 标签添加到 html 页面中strong> 元素。

因此，按照古老的惯例，您的样式会级联。

因此，当您有时间时，您可以将时间花在 BEM 等 css 样式约定或其他东西上。

Ciao！