Question

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

我目前在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;
  }
}

因此（可以预测），我的输出当前仅在content[i].innerHTML | this.highlight: searchTerm

中重复输出字符串<router-outlet>

我看过其他有关使用* ngFor的文章，但是* ngFor用于模板中。但是在我的情况下，当有人尝试在标头（而非App）组件中进行搜索时，标头组件只是发出searchEvent事件，然后在AppComponent模板中接收到该事件，该事件触发{{ 1}}中的startSearch ...中，因此我必须使用AppComponent中的管道，而不是标题中的管道。

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

Answer 1

编辑：

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

constructor(private highlight: HighlightPipe) {}

然后您可以使用：

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

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

1 个答案: