Angular 7：为什么类样式没有应用于 DOM 组件？

Question

我有一个组件计费，其中包括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，以下代码片段不起作用：

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

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

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

对这种奇怪的行为有什么想法吗？

Answer 1

方法 1 - 在选项卡内容模板中设置样式类

视图封装隔离了每个组件的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;
}

请参阅此 stackblitz的演示。

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

另一种方法是使用::ng-deep阴影穿透后代组合器来设置子组件内容的样式NgbTabset：

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

请参阅此 stackblitz的演示。

方法 3 - 关闭视图封装

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

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

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

请参阅此 stackblitz的演示。