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

以下两个在scss中有什么区别，
在代码段中提供一些示例。

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

和

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

最佳答案

首先，: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示例中，由于内的 CASE 1 而应用了color:red，并且由于 CASE 2 而将app.component.css仅应用于了color:yellow组件之一。
随意拨叉Stackblitz并玩耍。

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

关于angular - :host::ng-deep .class和.class:host::ng-deep之间的区别？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50566274/