如何在不引用任何标签的情况下引用 Angular 组件的完整模板设置 CSS？

Question

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

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

然后，在SASS中，我是这样引用的。

div.outer { ... }

这增加了一个缩进杠杆，似乎是不必要的（虽然很小）复杂性增加。所以我想知道是否可以为模板本身添加样式。部分原因是为了降低复杂性。部分原因是因为我将拥有完全没有标签的纯文本元素。

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

Answer 1

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

:host {
  color: red;
}

有关演示，请参阅 this stackblitz。