Question

我想将CSS应用于从父组件调用的子组件，并使用它能正常工作的技巧

封装：ViewEncapsulation.None

但是当我导航到其他路线或页面时，它会选择其封装不奇怪的组件的样式

和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 route

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

它工作正常，并且css仅选择example2 css，但是当我导航至example1并将naviagtes导航至example2

由于

选择示例1组件的样式

 encapsulation: ViewEncapsulation.None

当我删除此属性或直接访问它可以正常工作的路由时，确切的问题是我不知道为什么它会像这样

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

Answer 1

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

对于ViewEncapsulation 无-组件中的样式传播回主HTML，因此对页面上的所有组件可见。在应用程序中包含无和本机组件的应用程序时要小心。所有未封装的组件的样式将在所有组件中重复。

如果删除ViewEncapsulation属性，则它将采用默认设置，即仿真

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

Answer 2

简单的旧CSS hack

添加一个唯一的类，例如 .app-component移至组件的最顶层，并确保所有其他样式均为该类的子元素。

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

信息：

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

因此，按照古老的惯例，您的样式会层叠。

因此，如果您有时间将时间花在诸如 BEM 之类的css样式约定中。

C！

查看封装问题angular5

2 个答案: