ngb-highlight 选择器的 highlightClass 输入不起作用

Question

我正在使用 ngb-highlight 选择器来突出显示 table 中包含的一些术语。现在，我想添加一种背景颜色，并且根据在线文档，我使用了 highlightClass 输入并定义了一个包含这个新属性.

的自定义 class

使用其默认值 class，它可以改变字体粗细。新的 class 不起作用。

员工-list.component.html

<tr *ngFor="let employee of employees$ | async; index as i">
          <th scope="row">{{ i + 1 }}</th>
          <td>
            <ngb-highlight [result]="employee.firstname" [term]="filter.value" [highlightClass]="'employee-highlight'"></ngb-highlight>
          </td>
          <td>
            <ngb-highlight [result]="employee.lastname" [term]="filter.value" [highlightClass]="'employee-highlight'"></ngb-highlight>
          </td>
          <td>
            <ngb-highlight [result]="employee.email" [term]="filter.value" [highlightClass]="'employee-highlight'"></ngb-highlight>
          </td>
          <td>
            <ngb-highlight [result]="employee.role.name" [term]="filter.value" [highlightClass]="'employee-highlight'"></ngb-highlight>
          </td>
</tr>

员工-list.component.scss

.employee-highlight {
    background-color: yellow;
}

我希望背景颜色为黄色，但样式没有改变。我能做什么？

Answer 1

你能不能试试改一下

[highlightClass]="'employee-highlight'" to class="employee-highlight".

如果这没有帮助，请通过 Stackblitz 给我一个 link 你的代码，我会检查代码。

Answer 2

我解决了将 employee-highlight 定义为全局样式到 styles.scss 文件中的问题。

Answer 3

组件

中的 ViewEncapsulation 似乎未设置为 none

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

ngb-highlight 选择器的 highlightClass 输入不起作用

highlightClass input of ngb-highlight selector does not work

ng-bootstrap

angular