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

Question

1. 我有 2 种类型的组件，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 中的全局样式。