从宿主组件角度覆盖子组件样式的正确方法

Question

什么是从宿主组件覆盖子组件样式的正确方法。我尝试使用， encapsulation: ViewEncapsulation.None但是我需要在style.sass文件而不是主机组件中编写替代内容。什么是堆叠闪电战

Answer 1

如果您可以控制子组件代码，则可以定义customStyle输入属性：

@Input() customStyle: {};

<div class="child-div" [ngStyle]="customStyle">I am the child</div>

并从父组件传递它：

<app-child [customStyle]="style1"></app-child>

style1 = {
  backgroundColor: "red",
  height: "150px"
}

有关演示，请参见此堆叠闪电战。

类似的技术可以允许将特定的样式属性传递给子组件：

@Input() backgroundColor: string;

<div class="child-div" [style.background-color]="backgroundColor">I am the child</div>

来自父组件：

<app-child backgroundColor="red"></app-child>

有关演示，请参见此堆叠闪电战。

否则，直到Angular提出了另一种方法，您可以使用::ng-deep 刺穿阴影的后代组合器从父CSS修改子组件的样式：

:host ::ng-deep .parent .child-div {
  background-color: lime;
  height: 200px;
}

有关演示，请参见此堆叠闪电战。