JS中的:host ,:host-context和::ng-deep怎么用

发布时间:2022-02-24 15:42:29 作者:iii
来源:亿速云 阅读:191

这篇文章主要介绍“JS中的:host ,:host-context和::ng-deep怎么用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“JS中的:host ,:host-context和::ng-deep怎么用”文章能帮助大家解决问题。

:host 与 ::ng-deep

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

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

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

:host ::ng-deep .className{
    新的样式......
}
:host {
     background: #F1F1F1;
     overflow: hidden;
     padding: 24px;
     display: block;
}
 
.card-container ::ng-deep .ant-tabs-card .ant-tabs-content {
     height: 120px;
     margin-top: -16px;
}

不过官方文档上说,ng-deep 在未来的版本中将被放弃,不知道未来会变成什么样的语法。使用的时候,记得为未来 Angular 升级带来的变化做准备。

:host-context

::ng-deep 当你没有编写组件并且无法访问其源代码时,通常需要这样做,但是 :host-context 当你这样做时,它可能是一个非常有用的选项.

例如,我<h2>在我设计的组件中有一个黑色标题,我希望能够在黑暗的主题背景上显示时将其更改为白色.

如果我无法访问源代码,我可能必须在父代的 css 中执行此操作:

.theme-dark widget-box ::ng-deep h2 { color: white; }

但相反,:host-context您可以在组件执行此操作.SCSS代码

h2 
 {
     color: black;       // default color
     :host-context(.theme-dark) &
     {
         color: white;   // color for dark-theme
     }
     // OR set an attribute 'outside' with [attr.theme]="'dark'"
     :host-context([theme='dark']) &
     {
         color: white;   // color for dark-theme
     }
 }

这将查看组件链中的任何位置,.theme-dark 如果找到,则将 css 应用于 h2.这是一个很好的选择,过分依赖 ::ng-deep,而往往是必要的反模式.

在这种情况下,它&被替换为h2(这就是sass/scss的工作方式),因此您可以将"正常"和主题/替代 css 紧挨着定义,这非常方便.

官网资料

特殊的选择器

组件样式中有一些从影子(Shadow) DOM 样式范围领域引入的特殊选择器:

:host

使用 :host 伪类选择器,用来选择组件宿主元素中的元素(相对于组件模板内部的元素)。

src/app/hero-details.component.css

:host {
  display: block;
  border: 1px solid black;
}

:host 选择是是把宿主元素作为目标的唯一方式。除此之外,你将没办法指定它, 因为宿主不是组件自身模板的一部分,而是父组件模板的一部分。

要把宿主样式作为条件,就要像函数一样把其它选择器放在 :host 后面的括号中。

下一个例子再次把宿主元素作为目标,但是只有当它同时带有 active CSS 类的时候才会生效。

src/app/hero-details.component.css

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

:host-context

有时候,基于某些来自组件视图外部的条件应用样式是很有用的。 例如,在文档的 <body> 元素上可能有一个用于表示样式主题 (theme) 的 CSS 类,你应当基于它来决定组件的样式。

这时可以使用 :host-context() 伪类选择器。它也以类似 :host() 形式使用。它在当前组件宿主元素的祖先节点中查找 CSS 类, 直到文档的根节点为止。在与其它选择器组合使用时,它非常有用。

在下面的例子中,只有当某个祖先元素有 CSS 类 theme-light 时,才会把 background-color 样式应用到组件内部的所有 <h3> 元素中。

src/app/hero-details.component.css

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

已废弃 /deep/、>>> 和 ::ng-deep

组件样式通常只会作用于组件自身的 HTML 上。

把伪类 ::ng-deep 应用到任何一条 CSS 规则上就会完全禁止对那条规则的视图包装。任何带有 ::ng-deep 的样式都会变成全局样式。为了把指定的样式限定在当前组件及其下级组件中,请确保在 ::ng-deep 之前带上 :host 选择器。如果 ::ng-deep 组合器在 :host 伪类之外使用,该样式就会污染其它组件。

这个例子以所有的 <h4> 元素为目标,从宿主元素到当前元素再到 DOM 中的所有子元素:

src/app/hero-details.component.css

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

/deep/ 组合器还有两个别名:>>> 和 ::ng-deep。

/deep/ 和 >>> 选择器只能被用在仿真 (emulated) 模式下。 这种方式是默认值,也是用得最多的方式。 

CSS 标准中用于 "刺穿 Shadow DOM" 的组合器已经被废弃,并将这个特性从主流浏览器和工具中移除。 因此,我们也将在 Angular 中移除对它们的支持(包括 /deep/、>>> 和 ::ng-deep)。 目前,建议先统一使用 ::ng-deep,以便兼容将来的工具。

关于“JS中的:host ,:host-context和::ng-deep怎么用”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. 微信js-sdk+JAVA如何实现“分享到朋友圈”和“发送给朋友”功能
  2. JS参数反爬虫的方法是什么

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js

上一篇:js怎么实现本地时间轴

下一篇:Android实现简易计算器的代码怎么写

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》