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

Question

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

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

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

div.outer { ... }

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

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

标签： cssangularsassangular2-template

Answer 1

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

:host {
  color: red;
}

请参阅此 stackblitz以获取演示。