如何引用Angular组件的完整模板设置CSS，而不引用任何标签？

Question

我通常为每个视图设置的是外部DIV，我将其设置为基本背景等。

<div class="outer">
  <!-- Actual stuff in here -->
</div>

然后，在SASS中，我这样称呼它。

div.outer { ... }

这增加了一个缩进杠杆，并且看起来复杂性似乎是不必要的（尽管是次要的）增加。因此，我想知道是否可以向模板本身添加样式。部分是为了降低复杂度。部分是因为我将要使用完全没有标签的纯文本元素。

如果没有标签，仅包含文本，是否可以从SASS文件设置模板样式？

Answer 1

您可以使用:host selector将样式应用于组件宿主元素：

:host {
  color: red;
}

请参见this stackblitz以获取演示。