:host :host-context ::ng-deep详解

系统管理员 2021-09-07 06:11 386阅读 0赞

### :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`当你这样做时,它可能是一个非常有用的选项.

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

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

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

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

h1 
     {
         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应用于h1.这是一个很好的选择,过分依赖`::ng-deep`,而往往是必要的反模式.

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

# 官网资料 #

## 特殊的选择器 ##

组件样式中有一些从影子(Shadow) DOM 样式范围领域（记录在[W3C][]的[CSS Scoping Module Level 1][]中） 引入的特殊*选择器*：

### :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` 样式应用到组件*内部*的所有 `<h2>` 元素中。

src/app/hero-details.component.css

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

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

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

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

这个例子以所有的 `<h3>` 元素为目标，从宿主元素到当前元素再到 DOM 中的所有子元素：

src/app/hero-details.component.css

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

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

`/deep/` 和 `>>>` 选择器只能被用在**仿真 (emulated) **模式下。 这种方式是默认值，也是用得最多的方式。 更多信息，见[控制视图封装模式][Link 1]一节。

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

[W3C]: https://www.w3.org/
[CSS Scoping Module Level 1]: https://www.w3.org/TR/css-scoping-1
[Link 1]: https://angular.cn/guide/view-encapsulation
[Link 2]: https://www.chromestatus.com/features/6750456638341120