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

【问题标题】：highlightClass input of ngb-highlight selector does not workngb-highlight 选择器的 highlightClass 输入不起作用
【发布时间】：2019-12-04 16:20:48
【问题描述】：

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

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

员工列表.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>

员工列表.component.scss

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

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

【问题讨论】：

标签： angular ng-bootstrap

【解决方案1】：

看起来组件中的 ViewEncapsulation 未设置为 none

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

【讨论】：

【解决方案2】：

你可以尝试改变吗

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

如果这没有帮助，请通过 Stackblitz 给我一个指向您的代码的链接，我会检查代码。

【讨论】：

我改成了class，它每次都会突出显示整个单词，而不仅仅是指定的术语。我解决了在styles.scss 文件中定义像全局样式一样的员工高亮。现在 highlightClass 有效！

【解决方案3】：

我解决了在 styles.scss 文件中定义员工高亮像全局样式一样的问题。

【讨论】：