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

【问题标题】：How to refer to an Angular component's full template setting CSS without referring to any tags?如何在不引用任何标签的情况下引用 Angular 组件的完整模板设置 CSS？
【发布时间】：2019-12-17 23:51:40
【问题描述】：

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

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

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

div.outer { ... }

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

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

【问题讨论】：

您的文本元素肯定会在<p> 或您可以定位的其他语义标签中，对吧？
@SamWillis 否定。他们不会。（或者，更确切地说，它们可能不是。）为了方便读者，我仍然想对它们进行一些样式设置。（另外，我也很好奇它是否可以做到。学术好奇心。）

标签： css angular sass angular2-template

【解决方案1】：

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

:host {
  color: red;
}

请参阅this stackblitz 以获取演示。

【讨论】：