Question

:host的{{3}}并没有提到我们可以一次设置 all 宿主元素的样式。我在“全局”级别添加了此CSS：

:host {
    width: 100%;
}

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

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

其中app-search是组成部分app-search.component.ts。

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

Answer 1

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

encapsulation: ViewEncapsulation.None

像这样

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

这避免了您不得不重写样式并在全局级别启用样式。

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

Answer 2

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

为进一步说明，Angular的:host选择器是 shadow DOM样式范围（在CSS Scoping Module Level 1的W3C site页中进行了介绍）的特殊选择器）。

Angular文档明确指定您应该使用此选择器从子组件中选择父组件。但是，如果您对影子树的工作原理一无所知，可能对您似乎还不清楚。 see the documentation。

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

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

您可以使用CSS类名和选择器，以最大程度地发挥作用在每个组件的上下文中的意义。

类名和选择器对于组件而言是本地的，不会与类和选择器冲突在应用程序的其他地方使用。

更改样式的其他地方应用程序不会影响组件的样式。

您可以共居每个组件的CSS代码以及TypeScript和HTML代码组件，这导致了一个整洁的项目结构。

你可以更改或删除组件CSS代码，而无需搜索整个应用程序以查找代码的其他用途。

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

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

2 个答案: