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
s 将应用样式。
案例 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
之一组件因为CASE 2。
随意 fork Stackblitz 并尝试一下。
注意:如果您还不知道,阴影穿刺组合器 ::ng-deep
is being deprecated
关于angular - :host::ng-deep .class 和 .class :host::ng-deep 之间的区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50566274/