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

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

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

和

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

Vandesh.. 12

首先，:host它::ng-deep是Angular构造，与SASS无关

现在，假设您在Angular中定义了一个名为“ blog”的组件，并在blog.component.scss中为其定义了SASS。然后，

情况1 ：

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

会将定义的样式应用于.content-body组件范围内具有该类的任何元素。例如：

在上述情况下，两个都class="content-body" div将应用样式。

案例2：

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

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

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

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

首先，:host它::ng-deep是Angular构造，与SASS无关

现在，假设您在Angular中定义了一个名为“ blog”的组件，并在blog.component.scss中为其定义了SASS。然后，

情况1 ：

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

会将定义的样式应用于.content-body组件范围内具有该类的任何元素。例如：

在上述情况下，两个都class="content-body" div将应用样式。

案例2：

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

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

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

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