Angular的:host、:host-context、::ng-deep如何改写成长尾词？

本文共计1104个文字，预计阅读时间需要5分钟。

本篇章节深入探讨了Angular中的几个特殊选择器：`:host`、`:host-context` 和 `:ng-deep`。希望对大家有所助益！

一、`:host` 选择器`:host` 选择器用于匹配当前组件所在的宿主元素。例如：css:host { color: red;}这将使宿主元素的文本颜色变为红色。

二、`:host-context` 选择器`:host-context` 选择器允许你选择特定上下文中的宿主元素。例如：css:host-context('app') { background-color: lightblue;}这将为所有位于 `app` 元素下的宿主元素设置浅蓝色背景。

三、`:ng-deep` 选择器`:ng-deep` 选择器用于穿透Angular的组件树，匹配所有子组件的元素。例如：css:host /deep/ div { margin: 10px;}这将为宿主组件中所有 `div` 元素添加10px的边距。

[相关教程推荐：《Angular教程》][1]

[1]: https://angular.io/tutorial/toh-pt1#overview

本篇文章带大家深入了解一下angular中的几个特殊选择器:host、:host-context、::ng-deep，希望对大家有所帮助！

一、 :host

:host 表示选择当前的组件。

1.1 选择宿主元素

使用 :host 伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素），没有子元素就相当于选择整个宿主元素。

如有下面html:

<app-detail></app-detail>

组件 app-detail 的样式（整个app-detail 的样式）如下 ：

:host { display: inline-block; background: red; }

浏览器 Elements 选择 app-detail 元素， Style 如下：

[_nghost-wtd-c445] { display: inline-block; background-color: red; }

可以看得出来，:host 直接作用于宿主元素本身

1.2 选择宿主元素的子元素

可以在 :host 后面添加选择器以选择子元素。例如：:host h1 定位组件视图内的 h1 标签

:host h1 { color:red; }

1.3 有条件的选择宿主元素

把宿主作为目标，同时带有 active 的 class 类的时候才会生效

:host(.active){ border-width: 3px; }

像这样：

<app-detail class="active"></app-detail>

二、 ::ng-deep

::ng-deep 可以忽略中间 className 的嵌套层级关系。直接找到你要修改的 className。

在使用一些第三方的组件的时候，要修改组件的样式,这种情况下使用.

2.1 从宿主元素到当前元素再到 DOM 中的所有子 h3 元素，包括当前组件中使用第三方组件的 h3 元素

:host ::ng-deep h3 { font-style: italic; }

2.2 搜索某类型下面的特定类型

.card-container ::ng-deep .ant-tabs-card .ant-tabs-content { height: 120px; margin-top: -16px; }

三、 :host-context

如果需要满足某条件才能应用样式。它在当前组件宿主元素的祖先节点中查找 CSS 类，直到文档的根节点为止。如果找到，才会应用后面的样式到本组件内部元素。

3.1 选择组件宿主元素中的元素

:host-context { color:red; }

3.2 把宿主作为目标，同时带有active的class类的时候才会生效

在下面的例子中，只有当某个祖先元素(宿主元素也可以)有 CSS 类 theme-light 时，才会把 background-color 样式应用到本组件内部的所有 <h2> 元素中。

:host-context(.theme-light) h2 { background-color: #eef; }

3.3 可以在:host-context后面添加选择器以选择子元素

例如：:host-context h1 定位组件视图内的 h1 标签

:host-context h1{ color: hotpink; }

3.4 可用于某个样式内部条件判断

h1{ color: hotpink; :host-context(.active) &{ color: yellow; } }

更多编程相关知识，请访问：编程教学！！

以上就是Angular的:host、:host-context、::ng-deep选择器的详细内容，更多请关注自由互联其它相关文章！