Angular 区别：host:：ng deep.class和.class:host:：ng deep？

在scss中，以下两项之间的区别是什么， 在代码段中给出一些例子

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

及

---

首先，

：host

和

：ng deep

是角度结构，与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”

例如：

你可以。在StackBlitz示例中，

color:red

应用于案例1内部

app.component.css

，而

color:yellow

仅应用于

hello

组件中的一个，因为案例2
你可以自由地参与Stackblitz游戏

注意：如果您还不知道，阴影穿透组合器

：：ng deep

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

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

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