我遇到了嵌套在 ng-bootstrap 选项卡中的 scss 选择器的问题 [英] I'm having trouble with an scss selector that is nested in an ng-bootstrap tab

问题描述

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

模板文件摘录

 <ng-模板ngbTabTitle>项目信息

scss

.nav-link .badge {左边距:0.5em；}

这是渲染的html

<a class="nav-link active" href="" role="tab" id="projectInfoTab" aria-controls="projectInfoTab-panel" aria-expanded="true" aria-disabled="false">项目信息<span _ngcontent-c3="" class="error-badge碴徽章-丸徽章-danger">4</span></a>

解决方案

是因为 Angular 的封装机制.当你创建一个组件时，它的封装默认是Emulated.

检查此链接:检查 Angular 生成的 css

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

.nav-link .badge {左边距:0.5em；}

编译后会变成下面这样

.nav-link[_ngcontent-c3] .badge {左边距:0.5em；}

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

@Component({选择器:'你的补偿'，....封装:ViewEncapsulation.None})

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

I have an angular project and created a component with scss settings that don't seem to select when I'm nesting the selector under ng-bootstrap tab class names. Why can't I use a selector like this .nav-link .badge in my scss? However something like .card-body .badge does select the element.

template file excerpt

 <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;
}

Here's the rendered 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>

解决方案

It is because of Angular encapsulation mechanism. When you create a component, it's encapsulation is Emulated by default.

Check this link: Inspect generated css by Angular

When you put your style in your component style file, angular will generate your style with some attributes added to it, so your custom style

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

will become something like following after compilation

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

and since your ngb-tab component probably does not have any element with that attribute, it does not apply to it. You can change your component encapsulation by adding following code to your @Component decoration.

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

Another thing you can do is to move this css to the ngb-tab component style file.

这篇关于我遇到了嵌套在 ng-bootstrap 选项卡中的 scss 选择器的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！