Почему: host-context требуется, когда: host может удовлетворить потребности в Angular

Question

Как я понимаю, :host-context используется для применения стилей на основе селектора родителя.

Давайте рассмотрим правило следующим образом:

:host-context(.red-theme) { background-color: red; }

та же банказаписать с использованием: host selector следующим образом:

.red-theme :host { background-color: red; }

Тогда что явно требуется host-context?

Answer 1

Используйте :host, если хотите стилизовать сам пользовательский HTML-элемент компонента.

Где используется :host-context, когда вы также хотите, чтобы компонент применял стиль с учетом контекста, в котором отображается компонент.

Так, например, вы можете сделать: (с host-context)

<div class="red-theme">
    <app-component></app-component>
</div>

, где app-component

<button class="btn btn-theme">Button</button>

и стиль компонента определен:

:host-context(.red-theme) .btn-theme {
    background: red;
 }

Полезно, если вы хотите, чтобы в вашем веб-приложении было несколько альтернативных тем.