Question

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

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

和

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

Answer 1

首先，:host和::ng-deep是Angular结构，与SASS无关

现在，让我们假设您有一个名为＆＃34;博客＆＃34;在Angular中定义，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个组件中的一个，因为案例2 。
随意分叉Stackblitz并玩游戏。

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

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

1 个答案: