::ng-deep 将被弃用——还有其他选择吗？

Question

文档说：

不推荐使用穿透阴影的后代组合器，并且正在从主要浏览器和工具中删除支持。因此，我们计划放弃对 Angular 的支持（对 /deep/、>>> 和 ::ng-deep 的所有 3 个）。在此之前 ::ng-deep 应该是首选，因为它与工具的兼容性更广泛。

既然我想在不更改代码的情况下升级到新版本，那么不推荐使用的方法有哪些替代方法？

Answer 1

在这些东西上从committee meetings 中搜索actual notes 之后，似乎还没有提出替代方案。使用::ng-deep 语法可确保您让 Angular 打破他们为您的样式所做的样式封装（针对模板中子组件中的 DOM 节点）（而不是使用浏览器原生功能，使其更具未来感） - 显然证明）。我认为该注释只是为了让您知道，只要实际浏览器机制到位，他们就会计划实施它。我个人不会回避使用它。

在 CSS 中不使用该运算符的唯一方法是完全不让 Angular 管理组件的样式封装，方法是这样做：

import { ViewEncapsulation } from '@angular/core';

@Component({
    ...
    encapsulation: ViewEncapsulation.None
})

如果您这样做，您的样式将变为全局样式，因此请确保将每个样式规则与您的组件一起添加，以确保它们不会超出此范围。例如，如果您有一个 MyCustomComponent 组件，其选择器为 my-custom-component：

my-custom-component button { ... } /* good */
button { ... } /* bad */

Answer 2

一种可行的替代方法是将 css 样式包含在您的全局 styles.scss 文件*中。

例如，假设您想为在<mat-form-field> 下生成的<div class="mat-form-field-flex"> 元素添加样式，您可以同样使用::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"
        ],