是否可以为所有 Angular “主机”编写 CSS，还是我们必须单独选择每个主机答案

【问题标题】：is it possible to write CSS for all Angular "hosts" or do we have to select each host individually是否可以为所有 Angular “主机”编写 CSS，还是我们必须单独选择每个主机
【发布时间】：2018-07-28 03:41:47
【问题描述】：

:host 的 Angular documentationnot 提到我们可以同时设置所有宿主元素的样式。我在“全局”级别添加了这个 CSS：

:host {
    width: 100%;
}

但是没有效果。但是，这在组件级别的 CSS 中可以正常工作：

:host(app-search) {
    width: 100%;
}

其中app-search 是一个组件，app-search.component.ts。

是否可以为所有组件编写:host 选择器，还是必须在组件级别多次声明？

【问题讨论】：

标签： css angular css-selectors

【解决方案1】：

根据其定义（或规范），:host 永远不能在全球范围内使用。创建它是为了从组件级别使用并选择父组件（称为shadow host）从子组件（称为shadow tree）。 p>

为了更清楚地说明，Angular 的 :host 选择器是来自 shadow DOM 样式范围的特殊选择器（在 W3C site 上的 CSS Scoping Module Level 1 页面中描述）。

角度文档明确规定您应该使用此选择器从子组件中选择父组件。但是如果你不知道影子树是如何工作的，你可能会觉得不清楚。 see the documentation.

如果您需要为全局样式表中的任何组件设置样式，在 Angular 的全局范围内会自动添加一个 style.css 文件。只需将您的 CSS 放入该文件中，您就可以在所有组件中找到它全局可用。

组件级 CSS 文件使您的 CSS 模块化。这是一个很棒的功能，因为：

您可以使用 CSS 类名和选择器感觉在每个组件的上下文中。
类名和选择器是组件本地的，不会与类和选择器冲突在应用程序的其他地方使用。
在其他地方的样式更改应用程序不会影响组件的样式。
您可以共同定位每个组件的 CSS 代码与 TypeScript 和 HTML 代码组件，这导致了一个整洁的项目结构。
你无需搜索即可更改或删除组件 CSS 代码整个应用程序来查找代码的其他用途。

虽然它是可配置的，但我强烈建议不要使用ViewEncapsulation.None。它将杀死你所有的 CSS 模块化，你可以轻松地使用全局 CSS 文件而不影响范围限制。

【讨论】：

正确：“[I] 不知道影子树是如何工作的”……将查看上面引用的文档 :)
我还看到我可以将:host { width: 100%; } 写入外部文件，然后在组件级别使用@import
@rasx @import 只是将外部文件的内容拉到工作文件中。它的行为就像您从外部文件复制代码并将其粘贴到工作文件中一样。因此，它应该工作。 :)

【解决方案2】：

在您的 app-search.component.ts 文件中，您可以设置：

encapsulation: ViewEncapsulation.None

喜欢这个

@Component({
    templateUrl: 'app-search.component.html',
    styleUrls: ['app-search.component.css'],
    encapsulation: ViewEncapsulation.None
})

这使您不必重写样式并在全局级别启用样式。

您也可以尝试将样式直接应用到 index.html 文件中。这些样式也将是全局的，防止您在组件级别重写样式。

【讨论】：

你也可以使用Angular生成的style.css文件，已经在全球生效。
我建议不要使用 ViewEncapsulation.None 这意味着 Angular 没有视图封装。 Angular 将 CSS 添加到全局样式中。范围规则、隔离和保护不适用。这与将组件的样式粘贴到 HTML 中基本相同。