JS中的:host ，:host-context和::ng-deep怎么用
导读：本文共2657字符，通常情况下阅读需要9分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： :host 与 ::ng-deep:host 表示选择当前的组件。::ng-deep 可以忽略中间 className 的嵌套层级关系。直接找到你要修改的 className。在使用一些第三方的组件的时候，要修改组件的样式。这种情况下使用::host::ng-deep.className{新的样式......}:host{background:#F1F1F... ...
目录
(为您整理了一些要点),点击可以直达。
:host 表示选择当前的组件。
在使用一些第三方的组件的时候，要修改组件的样式。
这种情况下使用:
不过官方文档上说，ng-deep 在未来的版本中将被放弃，不知道未来会变成什么样的语法。使用的时候，记得为未来 Angular 升级带来的变化做准备。
::ng-deep 当你没有编写组件并且无法访问其源代码时,通常需要这样做,但是 :host-context 当你这样做时,它可能是一个非常有用的选项.
例如,我<h2>在我设计的组件中有一个黑色标题,我希望能够在黑暗的主题背景上显示时将其更改为白色.
如果我无法访问源代码,我可能必须在父代的 css 中执行此操作:
但相反,:host-context您可以在组件内执行此操作.SCSS代码
这将查看组件链中的任何位置,.theme-dark 如果找到,则将 css 应用于 h2.这是一个很好的选择,过分依赖 ::ng-deep,而往往是必要的反模式.
在这种情况下,它&被替换为h2(这就是sass/scss的工作方式),因此您可以将"正常"和主题/替代 css 紧挨着定义,这非常方便.
组件样式中有一些从影子(Shadow) DOM 样式范围领域引入的特殊选择器：
使用:host伪类选择器，用来选择组件宿主元素中的元素（相对于组件模板内部的元素）。
src/app/hero-details.component.css
:host选择是是把宿主元素作为目标的唯一方式。除此之外，你将没办法指定它， 因为宿主不是组件自身模板的一部分，而是父组件模板的一部分。
要把宿主样式作为条件，就要像函数一样把其它选择器放在:host后面的括号中。
下一个例子再次把宿主元素作为目标，但是只有当它同时带有activeCSS 类的时候才会生效。
src/app/hero-details.component.css
有时候，基于某些来自组件视图外部的条件应用样式是很有用的。 例如，在文档的<body>元素上可能有一个用于表示样式主题 (theme) 的 CSS 类，你应当基于它来决定组件的样式。
这时可以使用:host-context()伪类选择器。它也以类似:host()形式使用。它在当前组件宿主元素的祖先节点中查找 CSS 类， 直到文档的根节点为止。在与其它选择器组合使用时，它非常有用。
在下面的例子中，只有当某个祖先元素有 CSS 类theme-light时，才会把background-color样式应用到组件内部的所有<h3>元素中。
src/app/hero-details.component.css
组件样式通常只会作用于组件自身的 HTML 上。
把伪类::ng-deep应用到任何一条 CSS 规则上就会完全禁止对那条规则的视图包装。任何带有::ng-deep的样式都会变成全局样式。为了把指定的样式限定在当前组件及其下级组件中，请确保在::ng-deep之前带上:host选择器。如果::ng-deep组合器在:host伪类之外使用，该样式就会污染其它组件。
这个例子以所有的<h4>元素为目标，从宿主元素到当前元素再到 DOM 中的所有子元素：
src/app/hero-details.component.css
/deep/组合器还有两个别名：>>>和::ng-deep。
/deep/和>>>选择器只能被用在仿真 (emulated)模式下。 这种方式是默认值，也是用得最多的方式。
CSS 标准中用于 "刺穿 Shadow DOM" 的组合器已经被废弃，并将这个特性从主流浏览器和工具中移除。 因此，我们也将在 Angular 中移除对它们的支持（包括/deep/、>>>和::ng-deep）。 目前，建议先统一使用::ng-deep，以便兼容将来的工具。
JS中的:host ，:host-context和::ng-deep怎么用的详细内容，希望对您有所帮助，信息来源于网络。