从角度查看封装问题5

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'],

})

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

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

它工作得很好，css只接收example2css，但当我导航到example1并导航到example2 时

由于，它选择了示例1组件的样式

encapsulation: ViewEncapsulation.None

当我删除这个属性或直接访问路由时，它运行良好，到底是什么问题我不知道为什么它会像这个一样

示例1和示例2是两个不同的模块，并且有自己的路由

Answer 1

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

对于ViewEncapsulationNone，组件中的样式会传播回主HTML，因此对页面上的所有组件都可见。请小心应用程序中包含"无"one_answers"本机"组件的应用程序。所有具有None封装的组件都将在所有组件中复制其样式。

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

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

Answer 2

简单的旧css破解

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

如果您使用任何类型的css预处理器，效果会更好。

信息：

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

因此，按照古老的惯例，你的风格是级联的。

因此，当你有时间的时候，把你的时间投入到css样式约定上，比如BEM或其他什么。

Ciao！