在Angular 11中将父组件css应用于不在兄弟组件中的子组件

Question

1. 我有两种类型的组件，i) 登录前 ii) 登录后

2. 想为两个父组件添加 2 个不同的 css，

3. 使用 ViewEncapsulation.None 也适用于兄弟组件，这里是代码结构

    - ParentComponent1
      - ChildCompoent1.1
      - ChildCompoent1.2
    - ParentComponent2
      - ChildCompoent2.1
      - ChildCompoent2.2
   

4. 如果我在 ParentComponent1 中添加 CSS，那么它只适用于 ChildComponent1.1 和 ChildComponent1.2 而不是 2.1 和 2.2，同样适用于 ParentComponent2

有没有办法删除 ViewEncapsulation.None 或仅在子组件中应用 CSS 而不是在兄弟组件中

Answer 1

你可以使用仿真封装

封装：ViewEncapsulation.Emulated，

与 ViewEncapsulation.None 类似，Angular 将此组件的样式添加到文档的头部，但具有“范围”样式。

因此，只有直接在该组件模板中的元素才会匹配其样式。由于 EmulatedEncapsulationComponent 的“作用域”样式非常具体，它们会覆盖 NoEncapsulationComponent 的全局样式。