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

案例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。

你可以随意使用Stackblitz，尽情玩耍。

注:如果你还不知道，阴影穿透组合体::ng-deep is being deprecated