这篇文章主要介绍“Angular的:host、:host-context、::ng-deep选择器怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Angular的:host、:host-context、::ng-deep选择器怎么使用”文章能帮助大家解决问题。
创新互联是一家成都网站设计、成都网站建设，提供网页设计，网站设计，网站制作，建网站，定制网站开发，网站开发公司，公司2013年成立是互联行业建设者，服务者。以提升客户品牌价值为核心业务，全程参与项目的网站策划设计制作，前端开发，后台程序制作以及后期项目运营并提出专业建议和思路。
一、 :host
:host 表示选择当前的组件。
1.1 选择宿主元素
使用 :host 伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素），没有子元素就相当于选择整个宿主元素。
如有下面html:
组件 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 h2 定位组件视图内的 h2 标签
:host h2 {
color:red;
}1.3 有条件的选择宿主元素
把宿主作为目标，同时带有 active 的 class 类的时候才会生效
:host(.active){
border-width: 3px;
}像这样：
二、 ::ng-deep
::ng-deep 可以忽略中间 className 的嵌套层级关系。直接找到你要修改的 className。
在使用一些第三方的组件的时候，要修改组件的样式,这种情况下使用.
2.1 从宿主元素到当前元素再到 DOM 中的所有子 h4 元素，包括当前组件中使用第三方组件的 h4 元素
:host ::ng-deep h4 {
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 样式应用到本组件内部的所有
:host-context(.theme-light) h3 {
background-color: #eef;
}3.3 可以在:host-context后面添加选择器以选择子元素
例如：:host-context h2 定位组件视图内的 h2 标签
:host-context h2{
color: hotpink;
}3.4 可用于某个样式内部条件判断
h2{
color: hotpink;
:host-context(.active) &{
color: yellow;
}
}关于“Angular的:host、:host-context、::ng-deep选择器怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注创新互联行业资讯频道，小编每天都会为大家更新不同的知识点。
文章名称：Angular的:host、:host-context、::ng-deep选择器怎么使用
文章路径：
http://cdkjz.cn/article/ggejcp.html
