Question

我有一个简单的管道，当用户在文本输入中输入文本时，该管道可以即时突出显示文本。

@Pipe({
  name: 'highlight'
})
export class HighlightSearchPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }

  transform(value: string, args: string): any {
    console.log('pipe fired');
    if (args === null || args === '') { return value; }
    const index = value.toLowerCase().indexOf(args.toLowerCase());
    if (index === -1) { return value; }
    const str = value.substr(index, args.length);
    return this.sanitizer.bypassSecurityTrustHtml(value.replace(str, '<mark>' + str + '</mark>'));
  }
}

然后我像这样实现它：

<input (input)="searchString = $event.target.value">

<span [innerHTML]="somevalue | highlight: searchString"></span>

它工作得很好，除了删除输入中的文本时，它无法触发管道，因此它将保持与上次调用管道相同的方式。我已经使用放置在管道中的console.log()进行了验证。

似乎当接收到的值为null时，角度不会触发管道。我尝试了一些解决方法来触发空格' '而不是null或空字符串，但这似乎很麻烦。

Answer 1

我相信问题在这里

if (args === null || args === '') { return value; }
const index = value.toLowerCase().indexOf(args.toLowerCase());
if (index === -1) { return value; }

在绑定到页面之前，必须对HTML进行清理，并且在这两种情况下都将返回原始字符串值。我希望angular会抛出某种异常，但是也许它被吞噬了。

尝试一下：

if (args === null || args === '') { return this.sanitizer.bypassSecurityTrustHtml(''); }
const index = value.toLowerCase().indexOf(args.toLowerCase());
if (index === -1) { return this.sanitizer.bypassSecurityTrustHtml(value); }

目标值为空时管道不触发

1 个答案: