Angular 7：为什么类样式不适用于 DOM 组件？答案

【问题标题】：Angular 7: Why class style is not applied to DOM component?Angular 7：为什么类样式不适用于 DOM 组件？
【发布时间】：2019-08-13 14:13:58
【问题描述】：

我有一个组件计费，其中包括 Ng Bootstrap 的 ngb-tabset 组件。

ngb-tabset 具有以下 DOM 元素：

<ngb-tabset _ngcontent-c3="" class="content">
  <!-- Tabset links-->
  <div class="tab-content">
    <div _ngcontent-c3="">
      <!-- Content -->
    </div>
  </div>
</ngb-tabset>

<div class="tab-content">根据选中的标签动态显示。

在我的billing.component.scss 中，以下 sn-p 不起作用：

.tab-content {
  padding-right: 120px;
}

CSS 代码已正确编译，通常可以被导航器看到，但不会影响项目。

但是如果我将它应用到组件外的项目上，代码就可以正常工作。

你知道这种奇怪的行为吗？

【问题讨论】：

我想我可能是angular.io/api/core/ViewEncapsulation

标签： css angular sass

【解决方案1】：

方法一——在标签内容模板中设置样式类

View encapsulation 隔离每个组件的 CSS 样式，防止父组件 CSS 影响子组件。当前情况下的首选解决方案是在选项卡内容模板定义中设置样式类。这是一个例子：

<ngb-tabset>
  <ngb-tab title="Simple">
    <ng-template ngbTabContent>
      <div class="my-style-1">
        <p>Some content</p>
      </div>
    </ng-template>
  </ngb-tab>
  ...
</ngb-tabset>

.my-style-1 {
  padding-right: 120px;
  color: magenta;
  font-style: italic;
}

请参阅this stackblitz 以获取演示。

方法 2 - 使用 ::ng-deep 伪类选择器

另一种方法是使用::ng-deepshadow-piercing 后代组合器到styleNgbTabset子组件的内容：

::ng-deep .tab-content {
  padding-right: 120px;
}

请参阅this stackblitz 以获取演示。

方法 3 - 关闭视图封装

或者，您可以关闭父组件的视图封装：

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

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

请参阅this stackblitz 以获取演示。

【讨论】：

关于方法 2，目前可以使用，但 Angular 团队已弃用该方法。 angular.io/guide/component-styles#deprecated-deep--and-ng-deep
@JamieRees - 是的，::ng-deep 已被弃用，但我同意dudewad 关于该主题的结论：使用它直到 Angular 指定可以使用什么。
我使用方法3，它工作正常。方法1没有效果，可能是ViewEncapsulation的原因。
@clem - 方法 1 甚至可以使用视图封装，如 the stackblitz 所示。

【解决方案2】：

Angular 使用影子 DOM。这意味着它将 DOM 逻辑与其他元素分开。组件有自己的范围样式。它们以样式不应全局影响的方式封装。所以，如果你想改变 ngb-tabset 的风格，你必须走出它的范围。这就是您需要使用 ViewEncapsulation.None 的原因。

在@Component 装饰器中使用 ViewEncapsulation.None

@Component({
selector: ....,
encapsulation: ViewEncapsulation.None,
styles: [...])}

而且，您也可以使用 ng-deep。但是你不应该使用 ng-deep 因为它会被弃用。见这里-https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep

【讨论】：