Angular ：：ng deep将被弃用-有其他选择吗？

医生说：

阴影穿透子体combinator已被弃用，并且正在从主要浏览器和工具中删除支持。因此，我们计划在Angular（对于所有3个/deep/、>>>和：：ng deep）中放弃支持。在此之前，为了更广泛地与工具兼容，最好使用：：ng deep

---

既然我想升级到新版本而不改变代码，那么不推荐的方法有哪些替代方案

在对这些东西进行了彻底的研究之后，似乎还没有提出替代方案。使用

：：ng deep

语法可以确保Angular能够打破样式封装（对于模板中子组件中的DOM节点），而不是使用浏览器本机功能，这显然更能证明将来的样式。我认为这一点只是想让您知道，无论何时实际的浏览器机制到位，他们都计划实现它。我个人不会回避使用它

在CSS中不使用该操作符的唯一方法是完全不让Angular管理组件的样式封装，方法如下：

从'@angular/core'导入{ViewEncapsulation}；
@组成部分({
...
封装：视图封装。无
})

如果您这样做，您的样式将变为全局样式，因此请确保在组件中预先添加每个样式规则，以确保它们不会泄漏超过此范围。例如，如果您有一个

MyCustomComponent

组件，其选择器为

MyCustomComponent

：

我的自定义组件按钮{…}/*很好*/
按钮{…}/*坏*/

一个可行的选择是将css样式包含在全局

style.scss

文件*中

例如，假设要向在

下生成的

元素添加样式，则可以使用

：：ng deep

类似地：

您的.component.scss

::ng-deep mat-form-field.mat-form-field div.mat-form-field-flex {
  padding: 0 0 0 .75em;
}

或者，您可以更改：

styles.scss：

mat-form-field.mat-form-field  div.mat-form-field-flex {
  padding: 0 0 0 .75em;
}

---

*：这是添加到

angular.json

文件中的样式集合中的任何文件

"styles": [
          "src/theme.scss",
          "src/styles.scss"
        ],

---

@trichetriche

只需将类或其他选择器添加到HTML元素中

Angular的样式如果由于样式封装（在浏览器中模仿阴影DOM）而试图在模板中的子组件中设置DOM节点的样式，则其工作方式就不是这样了@DanielWStrimpel这就是为什么我问了一个问题。只需删除封装或使用全局样式，仅使用组件选择器，您就可以使用该伪选择器。@trichetriche

仅使用组件选择器，您就可以使用该伪选择器，只要您删除encapsulation@DanielWStrimpel我很确定你不用把它拿走也行，使用全球风格。我在打电话，所以我看不到plunkr，但我已经做了两年多了，所以我真的不知道你在说什么。封装将随机属性添加到元素中，我不认为样式表会打破这一点。有关更多详细信息和解决方案，请参见此答案和注释。是的，这是合乎逻辑的，因为全局样式文件用于包含所有angular应用程序和组件的全局
index.html
文件，尽管此索引没有任何角预构建封装，它们等价于
view封装。None
。但不要真的认为这是一个很好的方法，因为很难在全局文件中组织所有应用程序样式，除非您创建一个自定义样式文件夹，在其中放置所有自定义样式。然后将其导入全局样式文件。