: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>

您可以在此处查看 StackBlitz。在 StackBlitz 示例中，由于 color:red

 内部存在 

CASE 1，因此应用 app.component.css

，并且由于 

CASE 2

，仅将 

color:yellow

 应用于 

hello 组件之一。 请随意分叉 Stackblitz 并尝试一下。

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

正在被弃用

Answer 2

::ng-深: 用于深度设置嵌套子组件的样式，绕过视图封装。

::ng-deep .child-component-class { 
   color: red; 
   }

：主持人： 定位组件的宿主元素并设置其样式。

/* Component's CSS */
:host {
  display: block;
  border: 1px solid black;
  }

：主机上下文（）： 基于组件祖先元素中的条件的样式，对于主题或上下文样式很有用。

/* Component's CSS */ 
:host-context(.theme-dark) .element { 
  background-color: black;
   color: white; 
}