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

Question

下面的两个在scss中有什么区别，在snippet中给出一些示例。

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

和

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

Answer 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" div将应用样式。

案例2：

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

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

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

您可以在此处检查StackBlitz。在StackBlitz示例中，color:red由于内部是CASE 1app.component.css而color:yellow应用的，并且hello由于CASE 2而仅应用于组件中的一个。
随意拨叉Stackblitz并玩耍。

注意：如果您还不知道，则不推荐使用阴影穿刺组合::ng-deep 器