Как реализовать в трубе поиск и выделение?

Question

После нескольких неудачных поисков я хотел бы знать, есть ли в конвейере возможность связать функцию поиска и функцию выделения.

Единственный найденный мной пример, а этот:

https://stackblitz.com/edit/angular-searchpipe-8q9jyc

, который занимается исследованиями и выделением, но в двух разных каналах.

Возможно, использование канала может быть неправильным решением для обеих этих функций.

Можно пройти через сервис или компонент ....

Если у вас есть какие-то решения, которые могут научить меня, я берусь

Answer 1

Вы можете передать еще один аргумент в канал, чтобы выделить ваше содержимое, наряду с поисковым термином, если выберете

Труба

transform(list: any[], searchText: string, highlight?: boolean): any[] {
  if (!list) { return []; }
  if (!searchText) { return list; }

  searchText = searchText.toLowerCase();
  let response = list.filter( item => {
    return item.name.toLowerCase().includes(searchText);
  });

  if(highlight) {
    response = response.map(item => ({
      ...item,
      name: this._sanitizer.bypassSecurityTrustHtml(
        item.name.replace(searchText, `<span style='background-color:yellow'>${searchText}</span>`)
      ) 
    }));
  }
  return response;
}

Шаблон:

<div class="card" *ngFor="let item of list | search: searchedTerm : doHighlight">
  <span [innerHTML]="item.name"></span>
</div>

вы можете передать несколько аргументов в трубу, разделенных : здесь я передаю второй аргумент doHighlight=true, желая выделить мои отфильтрованные совпадения, если вы решите не выделять их простопередать doHighlight=false или не передавать ничего, поскольку выделение является необязательным аргументом.

Демо: https://stackblitz.com/edit/angular-searchpipe-bmzzez