是否可以为所有 Angular "hosts"编写 CSS，或者我们是否必须单独选择每个主机

Question

:host的 Angular 文档没有提到我们可以一次设置所有主机元素的样式。我在"全局"级别添加了此 CSS：

:host {
width: 100%;
}

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

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

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

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

Answer 1

根据其定义(或规范)，:host永远不能在全局级别使用。创建它是为了从组件级别使用并从子组件(称为shadow tree)中选择父组件(称为shadow host)。

为了进一步说明，Angular 的:host选择器是来自阴影 DOM 样式范围世界的特殊选择器(在 W3C 站点的 CSS 范围模块级别 1 页面中描述)。

角度文档明确指定应使用此选择器从子组件中选择父组件。但是，如果您不知道影子树的工作原理，那么您似乎不清楚。请参阅文档。

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

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

• 您可以使用 CSS 类名和选择器，以充分利用 在每个组件的上下文中的意义。
类名和选择器
• 是组件的本地，不会与类和选择器冲突 在应用程序的其他位置使用。
• 对 中其他位置的样式的更改 应用程序不会影响组件的样式。
• 您可以共置 每个组件的 CSS 代码，其中 TypeScript 和 HTML 代码为 该组件，可导致项目结构整洁。
• 你 可以更改或删除组件CSS代码，而无需搜索 整个应用程序，以查找代码的其他使用位置。

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

Answer 2

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

encapsulation: ViewEncapsulation.None

喜欢这个

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

这样可以防止您重写样式，并在全局级别启用样式。

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