javascript - 为什么该样式没有应用于 Angular 5 类

Question

借助正则表达式在文本中找到输入的单词，并将其包装在 <span class = "match"> the word </ span> 中使用管道。 Span 和类已创建，但该类的样式不起作用。 :(

import { Pipe, PipeTransform } from '@angular/core';
import { PageService } from '../services/page.service';

@Pipe({
  name: 'matchWord',
  pure: false
})
export class MatchWordPipe implements PipeTransform {

  constructor(private pageService: PageService) { }

  transform(value: any, args?: any): any {
    const pattern = new RegExp(this.pageService.inputSearchText , "ig");
    value = value.replace(pattern, (str) => {
      return `<span class="match">${str}</span>`;          
    });
    return value;
  }
}

在 HTML 中:

<p [innerHTML]="sentence | matchWord"></p>

我已经尝试过了，但是没用。

return `<span style="background-color:green;">${str}</span>`;

和

return `<span [ngStyle]="{'background-color':'green'}">${str}</span>`;

Answer 1

如果连内联样式都不起作用，可能是因为您生成的 html 已通过 Angular 进行了清理。

尝试使用 DomSanitizer 类绕过清理

pipe.ts

constructor(private pageService: PageService, private sanitizer: DomSanitizer) { }

transform(...
let value = `<span class="match">${str}</span>`;          
return this.sanitizer.bypassSecurityTrustHtml(value);

您可能还会遇到一些封装问题，具体取决于您的 match 类的定义位置。如果它是在全局样式表中定义的，那就没问题了。如果它是在组件的 css 文件中定义的，那么您可以按照 jedruniu 的答案中所示更改封装，或者使用以下内容:

组件.css

:host ::ng-deep span.match
{
     // your style here
     background-color: green;
}