Question

在正则表达式的帮助下，在文本中找到输入的单词，然后使用管道将其包含在<span class = "match"> the word </ span>中。创建了Span和class，但此类的样式不起作用。：（

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被角度消毒了。

尝试使用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的回答中的说明更改封装，或者使用：

<强> component.css

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

Answer 2

由于样式封装，样式被剥离。要使其正常运行，请尝试在encapsulation: ViewEncapsulation.None定义中添加@Component，其中包含此HTML：

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

类似的东西：

@Component({
  selector: 'sel',
  templateUrl: 'sel.component.html',
  styles: [],
  encapsulation: ViewEncapsulation.None
})

为什么样式不适用于Angular 5类

2 个答案: