使用 :host 和不使用它有什么区别？

Question

我发现 :host 在 Angular 中的用法非常混乱。

例如有一个CSS文件a-component.component.css，其相关的HTML文件为a-component.component.html，其selector为app-a-component。

并且在CSS文件中有一条语句

h1 {
 font-size: 12px;
}

根据下面的解释，我认为这个 CSS 仅适用于 <app-a-component> HTML 元素，对吗？

如果我将 CSS 更改为

:host h1 {
 font-size: 12px;
}

（添加:host）

它仍然适用于相同的<app-a-component> HTML 元素，因为它是该组件的宿主 HTML 元素，对吗？

如果它们都是正确的，为什么我们需要:host，因为它有或没有它的效果是一样的？

提前致谢！

Answer 1

在您的示例:host h1 { ...} 中没有区别。 :host 有用的地方是当您需要使用 ::ng-deep 或者您想要设置 host 元素的样式时。

例如

您有一个组件<my-component></my-component>，并且您希望将样式直接应用于该元素。您可以使用:host 选择器添加样式。

:host {
  background: red;
}

这会将my-component 元素的背景设置为红色。

对于:host ::ng-deep { ...，您可以为该规则禁用ViewEncapsulation，但仅适用于后代组件。如果您只使用::ng-deep 而不使用:host，那将成为全局样式。