Angular2 的组件样式在封装的子组件中不被继承

Question

我正在编写两个组件 - ComponentA 和 ComponentB，其中 ComponentA 封装了 ComponentB。它们都有一个p 标签。在我的ComponentA 中，我正在编写样式：p { color:red } 在我的@Component 装饰器中。 ComponentA 的 p 变为红色，但 ComponentB 的颜色保持黑色。

我认为这是一个需要解决的错误。

Answer 1

样式封装（防止样式渗入或流出组件）是 Angular 组件的主要特征。

有不同的选择来实现你想要的

@Component({
  selector: 'component-b',
  styles: [`
    p { color: red; }
  `]
  ...
  encapsulation: ViewEncapsulation.None
})

或者您可以使用最近引入的（仅限 Angular2）阴影穿透 CSS 组合器 >>>

更改 CSS 选择器以跨越组件边界

@Component({
  selector: 'component-b',
  styles: [`
    :host ::ng-deep p { color: red; }
  `]
  ...
})

第二种方法适用于默认封装 (ViewEncapsulation.Emulated)。
您不能将::ng-deep (>>>) 与encapsulation: ViewEncapsulation.Native 一起使用。
对 >>>（或等效的 /deep/）的支持已从 Chrome 中删除，并且在其他浏览器中从未真正支持。

提示：
/deep/ 似乎比 >>> 更适用于 SASS
SASS 不久前引入了 ::ng-deep 来支持这个 Angular 功能（当对 /deep/ 的支持从 SASS 中删除时）

Answer 2

正如接受的答案所述：这不是错误。

也就是说，这里有两种继承父样式的替代方法：

@Component({ styleUrls })

将父组件样式表添加到styleUrls列表中：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-child-component',
  templateUrl: './child.component.html',
  styleUrls: ['../parent.component.css', './child.component.css']
//             ^^ Going up
})

export class AppChildComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

---

预处理器导入（SCSS、SASS、LESS）

您还可以使用预处理器导入父样式。您只需调整项目设置即可使用它们：

@import "../parent.component.sass"
// .app-parent-component
//   border: 1px solid red

.app-child-component
  border: 1px solid blue

---

编译输出

两者都将生成具有正确范围的类，因此您将有效地继承父样式。

/* Compiled CSS */
.app-parent-component[_ngcontent-c1=""] {
  border: 1px solid red; }

/* Redeclares parent styles but with the child's scope */
.app-parent-component[_ngcontent-c2=""] {
  border: 1px solid red; }
.app-child-component[_ngcontent-c2=""] {
  border: 1px solid blue; }

Answer 3

这不是错误。

组件样式通常只适用于组件自己模板中的 HTML -- reference

如果您希望在父组件中定义的样式影响祖先组件，我会在父组件中使用 /deep/ 选择器（其别名为 >>>，正如 Günter 在他的回答中使用的那样），它将通过所有祖先组件强制样式下降。 请注意，这会将样式应用于所有视图子项以及内容子项。

@Component({
  selector: 'component-a',
  styles: [`/deep/ p { color: red; }`]
})

Plunker

另请参阅组件样式开发指南中的Special Selectors 部分。