Как выделить искомый текст в angular6, используя pipe? - PullRequest
Новая
       37

Как выделить искомый текст в angular6, используя pipe?

0 голосов
/ 29 сентября 2018

Я хочу построить поисковое окно в угловом формате, которое будет возвращать массив элементов, а также выделить поисковый элемент в массиве результатов.

Например: в Chrome, если вы ищете какой-либо текст, оновыделил бы светло-желтым фоном.Похоже на это.

enter image description here

Я создал две трубы, одну для фильтрации результатов и другую для выделения термина в результатах , в котором выполняется поиск,Но я получаю сообщение об ошибке replace is not a function.

А также, можно ли объединить две трубы в одну?

highlight.pipe.ts 

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

    const re = new RegExp(searchText, 'gi');
    const value = list.replace(re, "<span class='yellow'>" + searchText + "</span>" );
    return list;
}

с использованием трубы в шаблоне

<div class="card" *ngFor="let item of list | search: searchedTerm | highlight: searchedTerm">

Ответы [ 2 ]

0 голосов
/ 29 сентября 2018

1- В файле highlight.pipe.ts 

transform(list: any, searchText: string): any[] {
console.log('lists', list);
console.log('searchText', searchText);

if (!list) { return []; }
//to remove highlighted tags before any processing
list = list.map(function (item) {
  item.name = item.name ? String(item.name).replace(/<[^>]+>/gm, '') : '';
  return item;
})
if (!searchText) { return list; }

const re = new RegExp(searchText, 'gi');
const value = list
  .map(function (item) {
    //this will match the values and add the highlight tag for it
    item.name = item.name.replace(re, "<span class='yellow'>" + searchText + "</span>");
    return item
  });
return value;

}

2 - Переместите стиль .yellow в style.css, чтобы соответствовать введенному html

3- В app.component.html 

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

Если вы хотите, чтобы элементы исчезли, используйте поисковую трубу, если хотите, чтобы она была только выделена, тогда достаточно только выделенной трубы

ссылка на обновленный Stackblitz: https://stackblitz.com/edit/angular-searchpipe?file=src%2Fapp%2Fapp.component.html

0 голосов
/ 29 сентября 2018

I
Итерировать по фильтру list на searchedTerm.Поместите выделенный HTML-код в innerHTML. 

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

II 

// HighlightPipe
const re = new RegExp(searchText, 'gi');
return item.replace(re, `<span class='yellow'>${searchText}</span>` );

III

Использовать устарело (переместитьв глобальные стили) deep в качестве компонентов по умолчанию эмулируется ViewEncapsulation 

// css
::ng-deep .yellow{
  background: yellow;
}
...