角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-在标签内容模板中设置样式类

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-deep穿透阴影的后代组合器来style子组件NgbTabset的内容：

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

有关演示，请参见this stackblitz。

---

方法3-关闭视图封装

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

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

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

有关演示，请参见this stackblitz。

Answer 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