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

Question

scss中下面两个有什么区别，在片段中给出一些例子。

: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 s 将应用样式。

案例 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由于 CASE 1 在 app.component.css 中被应用和 color:yellow仅适用于 hello 之一组件因为CASE 2。
随意 fork Stackblitz 并尝试一下。

注意:如果您还不知道，阴影穿刺组合器 ::ng-deep is being deprecated