Angular的:host、:host-context、::ng-deep选择器怎样用
本篇文章带大家深入了解一下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选择器怎样用的介绍啦,需要的朋友可以参考上述内容,希望对大家有帮助,欢迎关注网络,小编将为大家输出更多高质量的实用文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: Angular的:host、:host-context、::ng-deep选择器怎样用
本文地址: https://pptw.com/jishu/654216.html