分享更有价值
被信任是一种快乐

Angular的:host、:host-context、::ng-deep选择器怎么使用

文章页正文上

这篇文章主要介绍“Angular的:host、:host-context、::ng-deep选择器怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Angular的:host、:host-context、::ng-deep选择器怎么使用”文章能帮助大家解决问题。:host 表示选择当前的组件。1.1 选择宿主元素使用 :host 伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素),没有子元素就相当于选择整个宿主元素。如有下面html:组件 app-de免费云主机、域名tail 的样式(整个app-detail 的样式)如下 :浏览器 Elements 选择 app-detail 元素, Style 如下:可以看得出来,:host 直接作用于宿主元素本身1.2 选择宿主元素的子元素可以在 :host 后面添加选择器以选择子元素。例如::host h2 定位组件视图内的 h2 标签1.3 有条件的选择宿主元素把宿主作为目标,同时带有 active 的 class 类的时候才会生效像这样:::ng-deep 可以忽略中间 className 的嵌套层级关系。直接找到你要修改的 className。在使用一些第三方的组件的时候,要修改组件的样式,这种情况下使用.2.1 从宿主元素到当前元素再到 DOM 中的所有子 h4 元素,包括当前组件中使用第三方组件的 h4 元素2.2 搜索某类型下面的特定类型如果需要满足某条件才能应用样式。它在当前组件宿主元素祖先节点中查找 CSS 类,直到文档的根节点为止。如果找到,才会应用后面的样式到本组件内部元素。3.1 选择组件宿主元素中的元素3.2 把宿主作为目标,同时带有active的class类的时候才会生效在下面的例子中,只有当某个祖先元素(宿主元素也可以)有 CSS 类 theme-light 时,才会把 background-color 样式应用到本组件内部的所有

元素中。3.3 可以在:host-context后面添加选择器以选择子元素例如::host-context h2 定位组件视图内的 h2 标签3.4 可用于某个样式内部条件判断关于“Angular的:host、:host-context、::ng-deep选择器怎么使用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注云技术行业资讯频道,小编每天都会为大家更新不同的知识点。

相关推荐: Angular变更检测机制怎么进行性能优化

本篇内容介绍了“Angular变更检测机制怎么进行性能优化”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!组件内的数据状态变化以后,需要对应更新视图。这种将视图和…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册