如何在常规 Javascript for 循环中使用 Angular 管道？

Question

我在 Angular 的 appComponent 中使用高亮管道来高亮显示在另一个组件的 router-outlet 中的搜索文本，但我不知道如何在组件中使用管道（而不是在模板中）。

我目前在app.component.ts：

import { Component, OnInit } from '@angular/core';
import { HighlightPipe } from './shared/highlight-pipe';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [ HighlightPipe ]
})

export class AppComponent {
  constructor(private highlight: HighlightPipe) {}

  startSearch(searchTerm: string) {
    if (!searchTerm) {
      return;
    }
    const content = document.getElementById('content');
    if (content) {
      const mainContent = content.children;

      for (let i = 0; i < content.length; i++) {
        **content[i].innerHTML = 'content[i].innerHTML | this.highlight: searchTerm';** <-- here
      }
    }
  }
}

我的app.component.html：

<app-header (searchEvent)="startSearch($event)"></app-header>
<router-outlet></router-outlet>

我的highlight-pipe.ts：

import {PipeTransform, Pipe} from '@angular/core';

@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  transform(text: string, search): string {
    let pattern = search.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
    pattern = pattern.split(' ').filter((t) => {
      return t.length > 0;
    }).join('|');
    const regex = new RegExp(pattern, 'gi');

    return search ? text.replace(regex, (match) => `<span class="highlight">${match}</span>`) : text;
  }
}

所以（可以预见）我的输出目前只是在<router-outlet> 中重复打印字符串content[i].innerHTML | this.highlight: searchTerm

我看过其他文章讨论使用 *ngFor 但 *ngFor 在模板中使用。但在我的情况下，当有人试图在标头（不是应用程序）组件中进行搜索时，标头组件只会发出 searchEvent 事件，然后在 AppComponent 模板中接收该事件，这会在 @987654333 中触发 startSearch @... 所以我必须在AppComponent 中使用管道而不是在标题中。

是否可以在组件中的普通 JS for 循环中使用管道而不是在 Angular 的模板中使用管道？

Answer 1

编辑：

将管道添加到您的构造函数中：

constructor(private highlight: HighlightPipe) {} 

然后你可以使用：

content[i].innerHTML = this.highlight(content[i].innerHTML, "searchTerm")