Question

我有一个角度项目并使用scss设置创建了一个组件，当我将选择器嵌套在ng-bootstrap选项卡类名下时，这些组件似乎没有选择。为什么我不能在我的scss中使用像.nav-link .badge这样的选择器？但是.card-body .badge之类的东西会选择元素。

模板文件摘录

 <ngb-tab id="projectInfoTab">
    <ng-template ngbTabTitle>
       Project info<span class="badge badge-pill badge-danger">4</span>
    </ng-template>
 <ng-template ngbTabContent>
...

SCSS

.nav-link .badge {
  margin-left: .5em;
}

这是渲染的html

<div _ngcontent-c3 class="card-body">
  <a class="nav-link active" href="" role="tab" id="projectInfoTab" aria-controls="projectInfoTab-panel" aria-expanded="true" aria-disabled="false">
    Project info<span _ngcontent-c3="" class="error-badge badge badge-pill badge-danger">4</span>
  </a>
</div>

Answer 1

这是因为Angular封装机制。创建组件时，默认情况下它的封装为Emulated。

点击此链接：Inspect generated css by Angular

当您将样式放在组件样式文件中时，angular会生成您的样式并添加一些属性，因此您的自定义样式

.nav-link .badge {
   margin-left: .5em;
}

编译后

会变成跟随的东西

.nav-link[_ngcontent-c3] .badge {
   margin-left: .5em;
}

由于您的ngb-tab组件可能没有任何具有该属性的元素，因此它不适用于它。您可以通过在@Component装饰中添加以下代码来更改组件封装。

@Component({
   selector: 'your-comp',
   ....
   encapsulation: ViewEncapsulation.None
})

您可以做的另一件事是将此CSS移动到ngb-tab组件样式文件。

我在使用嵌套在ng-bootstrap选项卡中的scss选择器时遇到问题

1 个答案: