:host::ng-deep .class 和 .class :host::ng-deep 之间的区别？答案

【问题标题】：Difference between :host::ng-deep .class and .class :host::ng-deep?:host::ng-deep .class 和 .class :host::ng-deep 之间的区别？
【发布时间】：2018-11-07 01:00:05
【问题描述】：

以下两个在scss中有什么区别，在sn-p中举一些例子。

:host::ng-deep .content-body {
...
}

和

.content-body :host::ng-deep {
...
}

【问题讨论】：

标签： angular sass

【解决方案1】：

首先，:host 和 ::ng-deep 是 Angular 构造，与 SASS 无关

现在，假设您在 Angular 中定义了一个名为“blog”的组件，而 blog.component.scss 是您为其定义 SASS 的位置。那么，

案例 1：

:host::ng-deep .content-body {
...
}

会将定义的样式应用于组件范围内具有类.content-body 的任何元素。例如：

<div>
  <blog>
    <div class="content-body"></div>
    <div class="some-extra-content">
      <div class="content-body"></div>
    </div>
  </blog>
</div>

在上述情况下，class="content-body"divs 都将应用该样式。

案例 2：

.content-body :host::ng-deep {
...
}

将仅将定义的样式应用于在具有class="content-body"的元素内定义的组件实例
例如：

<blog></blog> <!-- Style won't be applied here -->
<div class="content-body">
  <blog></blog> <!-- Style will be applied here -->
</div>

您可以check a StackBlitz here。在 StackBlitz 示例中，color:red 被应用是因为 app.component.css 内部的 CASE 1，而 color:yellow 仅应用于 hello 组件之一，因为 CASE 2.
随意分叉 Stackblitz 并玩转。

注意：如果你还不知道，阴影穿刺组合::ng-deepis being deprecated

【讨论】：