*吴-深度将受到反对-有其他选择吗？

Question

医生说：

穿透阴影的后代组合器被废弃，支持正在从主要的浏览器和工具中删除。因此，我们计划在角度上放弃支持(对于/deep/，>>>和：：ng-深层的所有3种支持)。在此之前，应该更倾向于与工具进行更广泛的兼容性。

由于我想在不更改代码的情况下升级到新版本，所以不推荐的方法有哪些替代方案？

Answer 1

在从实际注释上搜索委员会会议之后，似乎还没有提出一个替代方案。使用::ng-deep语法可以确保您让styles来处理它们为您的样式所做的样式封装(对于模板中的子组件中的DOM节点)(而不是使用浏览器本机特性，这显然使其更具有未来的安全性)。我认为，这只是为了让您知道，每当实际的浏览器机制到位，他们就计划实现它。我个人不会羞于使用它。

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

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文件*中。

例如，假设要向在<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"
        ],