用什么代替 ::ng-deep

Question

我正在尝试以角度设置路由器插座放置的元素的样式，并希望确保生成的元素的宽度为 100%

从大多数回复中，我看到我应该使用 ::ng-deep 选择器，但从 Angular 的 docs 来看，它已被弃用。 ::ng-deep 有替代品吗？

Answer 1

FWIW 在我的研究中，我没有找到任何替代 ng-deep 或其他适用替代品的方法。这是因为，我相信 Angular 团队在遵循 W3C 对 shadow dom 的规范，该规范最初有诸如 deep 之类的选择器。然而，W3c 此后删除了该建议，但没有用新的建议取而代之。在此之前，我想 Angular 团队将保留::ng-deep 并且它的替代品可用，但由于 W3C 草案的未决状态而处于弃用状态。我现在无法花时间找到支持此内容的文档，但我最近确实看到了。

长话短说：继续使用 ::ng-deep 及其替代品，直到创建替代品 - 弃用只是提前通知，这样人们就不会在实际变化发生时措手不及。

-- 更新--

https://drafts.csswg.org/css-scoping-1/ 如果您有兴趣，这里是提案草案。看起来他们正在为 shadow dom 树中的元素开发一组健壮的选择器；正是这个规范，一旦获得批准，我认为它会通知 Angular 克隆，如果有的话（即，一旦它在浏览器中上线，Angular 可能不需要实现自己的选择器）。

Answer 2

深度样式的简单替代方案是使用父组件的元素选择器的常见样式。所以如果你在 hero-details.component.css 中有这个：

:host ::ng-deep h3 {
  font-style: italic;
}

它会在styles.css中变成这样：

app-hero-details h3 {
  font-style: italic;
}

基本上，深度样式是一种未封装的样式，因此从概念上讲，它对我来说更像是一种常见的样式，而不是组件样式。就我个人而言，我不会再使用深度样式了。重大版本更新中的重大更改是正常的，删除已弃用的功能是公平的游戏。

Answer 3

为了绕过已弃用的::ng-deep，我通常禁用ViewEncapsulation。虽然这不是最好的方法，但它对我很有帮助。

要禁用ViewEncapsulation，请在您的组件中执行以下操作：

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

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  encapsulation: ViewEncapsulation.None
})

export class HeaderComponent {

}

这将使该组件中的 .scss 样式对整个应用程序都是全局的。为了不让样式沿链向上到达父组件和兄弟组件，请使用选择器将整个 scss 包装起来，如下所示：

app-header {
  // your styles here and any child component styles can go here
}

现在，此处指定的样式将归结为子组件，因此您必须更加具体地使用您的 css 选择器，并在添加 CSS 时注意您的 p 和 q（可能添加在您的 Angular 应用程序中指定的子选择器，然后添加它的样式)。

由于上面的段落，我说这不是最好的方法，但这对我很有帮助。

Answer 4

如前所述，如果您使用第三方库，几乎不可能避免偶尔使用::ng-deep。但是，当浏览器不再支持 ::ng-deep 时，您将如何处理以前的项目？

要为那一刻做好准备，我将提出以下建议：

1. 明智地使用 ViewEncapsulation.None。这意味着仅适用于那些需要访问更深层组件的组件。

@Component({
      selector: 'app-example',
      templateUrl: './example.component.html',
      styleUrls: ['./example.component.scss'],
      encapsulation: ViewEncapsulation.None
    })

1. 现在，为避免冲突和 CSS 怪异，您应该（通常）始终用类包装组件的模板。所以，example.component.html 应该是这样的：

<section class="app-example-container">
<!-- a third party component -->
<mat-tab-group>
<mat-tab label="First"></mat-tab>
<mat-tab label="Second"></mat-tab>
</mat-tab-group>
</section>

1. 同样，根据规则，每个 SCSS 文件的第一行都将针对组件容器。由于没有封装，您可以通过定位第三方组件的类来修改它们。也就是说，example.component.scss 应该是：

.app-example-container {
/* All the CSS code goes here */
.mat-tab-group .mat-tab-label {color: red;}
}

对未来的自我说明：https://angular.io/guide/component-styles
这应该是寻找官方替代方案/可行方法的第一个地方

Answer 5

这不是 ::ng-deep 的一般替代品，而是问题作者描述的用例：

在特殊情况下，您想要设置由路由器插座插入的元素的样式，有一个优雅的解决方案，使用 CSS 中的相邻邻居选择器：

router-outlet+* {
  /* styling here... */
}

这将适用于与路由器插座直接相邻的所有元素。

延伸阅读：
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

Answer 6

您可以使用“/deep/”。这是 ::ng-deep 的替代方案。

:host /deep/ h3 {
  font-style: italic;
}