Question

Doc说：

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

由于我想在不更改代码的情况下升级到新版本，最新的方法是什么？

Answer 1

在对这些东西的actual notes中搜索committee meetings之后，看起来还没有提出替代方案。使用html语法可确保您让Angular处理样式封装（对于模板中子组件中的DOM节点），它们正在为您的样式执行（而不是使用浏览器本机功能，使其成为可能）显然更具前瞻性）。我认为这个说明只是让你知道，只要实际的浏览器机制到位，他们就会计划实施它。我个人不会回避使用它。

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

::ng-deep

如果你这样做，你的风格会变成全局的，所以请确保在每个风格规则前加上你的组件，以确保它们不会泄漏。例如，如果您的import { ViewEncapsulation } from '@angular/core'; @Component({ ... encapsulation: ViewEncapsulation.None })组件的选择器为MyCustomComponent：

my-custom-component

Answer 2

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

例如，假设您要为在<div class="mat-form-field-flex">下生成的<mat-form-field>元素添加样式，可以同样使用::ng-deep：

your.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"
        ],

Answer 3

如果仍然有人需要，只需使用“ / deep /”代替:: ng-deep

示例：

/deep/.mat-form-field{
  //put style here
}

:: ng-deep将被弃用 - 任何替代方案？

3 个答案: