用什么代替:: ng-deep

我正在尝试对路由器插座放置的元素进行倾斜设置，以确保生成的元素的宽度为100％

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

FWIW在我的研究中，我没有找到ng-deep的替代品或其他适用的替代品。我相信这是因为，Angular团队正在遵循影子dom的W3C规范，该规范最初具有诸如的选择器deep。但是，W3c自此删除了该建议，但未用新建议取代它。在此之前，我想像Angular团队将继续使用::ng-deep它的替代方案，但由于W3C草案的待定状态而处于过时状态。我现在无法花时间来找到支持该文档的文档，但是最近确实看到了。

长话短说：继续使用::ng-deep它及其替代方案，直到创建替代方案为止-弃用只是一个早期通知，因此，只要实际的更改实现，人们就不会蒙蔽双眼。

-更新-

https://drafts.c​​sswg.org/css-scoping-1/ 如果您有兴趣，这是提案草案。看来他们正在为影子dom树中的元素选择器的强大集合。我认为正是这一规范（一旦获得批准）将通知角度克隆，甚至还有一个克隆（即，一旦在浏览器中发布，角度可能不需要实现自己的选择器）。

要绕开已弃用的设备::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应用中指定的子选择器，然后添加其样式）。

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

深层样式的简单替代方法是使用父组件的元素选择器的通用样式。因此，如果您在hero-details.component.css中具有此功能：

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

它将在styles.css中变为：

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

基本上，深层样式是未封装的样式，因此从概念上讲，它对我来说更像是通用样式，而不是组件样式。我个人不再使用深样式。重大更改是主要版本更新中的正常现象，而过时的功能删除则是公平的游戏。

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

为此，我将提出以下建议：

1. 明智地使用ViewEncapsulation。这仅转换为需要访问更深层组件的那些组件。

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

2. 现在，为了避免冲突和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>

3. 同样，根据规则，每个单个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
应该是寻找官方替代品/路途的第一个地方

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

在特殊情况下，如果要设置由路由器出口插入的元素的样式，则可以使用CSS中的相邻邻居选择器来解决问题：

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

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

进一步阅读：
https : //developer.mozilla.org/zh-CN/docs/Web/CSS/Adjacent_sibling_combinator
https://angular.io/guide/router#router-outlet

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

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