Как изменить стиль дочернего компонента с эмулированной инкапсуляцией в Angular 6?

Question

Как обновить определенный дочерний компонент css из родительского без изменения представления инкапсуляции?

Вот пример demo

app.component.ts

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

hello.component.ts

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

@Component({
 selector: 'hello',
  template: `<h1 class='test'>Hello {{name}}!</h1>`,
  styles: [`.test { font-family: Lato;color:red; }`]
})
export class HelloComponent  {
  @Input() name: string;
}

app.component.css

:host ::ng-deep .test{
  color:green;
}

p {
  font-family: Lato;
}

На панели инструментов Chrome видно, что он пытается переопределить стиль, однако дочерний компонент по-прежнему отображает цвет: красный.

Answer 1

Псевдоселектор :host предназначен для элемента хоста вашего компонента (например, <app-hello>, элемент недоступен в собственной разметке).Это так просто, как кажется.

::ng-deep немного отличается.Когда Angular компилирует стили компонентов, этот селектор заставит стиль просачиваться через все дочерние компоненты как часть их собственного инкапсулированного контекста.

То, что вы говорите с :host ::ng-deep .test {, это «целевые потомки элемента host»[_nghost-c1] и все элементы, которые являются дочерними элементами элемента host с class = "test".

Правило .test {, заключенное в этот компонент, говорит "предназначайтесь для каждого элемента в этом компоненте (скомпилировано в * 1015").*) with class = "test".

Поскольку h1 является потомком хоста, но прямым членом компонента, последний является более конкретным правилом и выигрывает битву CSS.

Answer 2

Довольно близко отсутствует одна вещь в вашем CSS.

:host ::ng-deep hello .test{
  color:green;
}

, где hello - селектор компонента.

https://stackblitz.com/edit/angular-74ajje