Question

我正在编写两个组件 - ComponentA和ComponentB，其中ComponentA封装了ComponentB。它们都有一个p标记。在我的ComponentA中，我正在我的p { color:red }装饰器中编写样式：@Component。 ComponentA＆＃39; s 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一起使用已从Chrome中删除对>>>（或等效的/deep/）的支持，并且在其他浏览器中从未真正支持。

<强>暗示：
对于SASS而言， ~~/deep/似乎比>>>~~ 更好 SASS在一段时间之前介绍::ng-deep以支持此Angular功能（当从SASS中删除对/deep/的支持时）

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

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

>>>

Plunker

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

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

3 个答案:

@Component（{styleUrls}）

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

编译输出