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

Question

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

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

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

div.outer { ... }

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

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

Answer 1

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

:host {
  color: red;
}

参见 this stackblitz用于演示。