몇 달 전(이전 직장에서) 입력에서 검색한 텍스트를 강조 표시하는 기능을 구현해야 했던 것을 기억합니다. 정확한 구현을 기억할 수는 없지만 StackOverflow에서 이 작업을 수행할 수 있는 방법에 대한 몇 가지 답변이 있었던 것을 기억합니다. 솔루션을 구현하는 데 몇 가지 문제가 있었던 것을 기억하지만 궁극적으로 알아낼 수 있었습니다. 오늘 저는 작동하는 솔루션을 만들었습니다. 물론 내 코드를 복사하거나 필요에 맞게 조정할 수 있습니다.

저장소here를 찾을 수 있습니다.

빠른 요약

파이프에 대한 전체 코드 스니펫과 사용 방법에 대한 요약을 제공합니다.

파이프

다음은 파이프에 대한 코드입니다.

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

@Pipe({
  name: 'highlightSearch',
})
export class HighlightSearchPipe implements PipeTransform {
  transform(value: any, args: any): any {
    if (!args) {
      return value;
    }

    const regex = new RegExp(args, 'gi');
    const match = value.match(regex);

    if (!match) {
      return value;
    }

    return value.replace(regex, `<span class='highlight'>${match[0]}</span>`);
  }
}

보시다시피 반환 값에 highlight 클래스가 있습니다. 전역styles.scss 파일에서 이 클래스를 다음과 같이 정의했습니다.

.highlight {
  background-color: violet;
  font-weight: bold;
}

구현

검색 텍스트 구성 요소

먼저 구성 요소의 중요한 부분을 보여준 다음 전체 템플릿과 코드를 공유하겠습니다.

내search-text.component.html 템플릿에서 파이프를 다음과 같이 사용합니다.

  <p [innerHTML]="pet.description | highlightSearch: Search"></p>

Search가 파이프에 전달되는 값임을 알 수 있습니다. Search 값은 OnSearched 방법으로 설정됩니다. 같은 파일의 1행에서 searched 메서드를 호출하고 값을 제공하는 OnSearched 이벤트 방출기에서 내 검색어를 얻습니다.

<app-search (searched)="OnSearched($event)"></app-search>

다음은 전체search-text.component.html 파일입니다.

<app-search (searched)="OnSearched($event)"></app-search>
<div class="card-container">
  <div class="card" *ngFor="let pet of pets">
    <mat-card>
      <mat-card-header>
        <mat-card-title>{{ pet.name }}</mat-card-title>
        <mat-card-subtitle>{{ pet.species }}</mat-card-subtitle>
      </mat-card-header>
      <mat-card-content>
        <p [innerHTML]="pet.description | highlightSearch: Search"></p>
        <p>
          <strong>Nickname/s: </strong>
          <span *ngFor="let nickname of pet.nicknames; let i = index"
            >{{ nickname
            }}{{ i === pet.nicknames.length - 1 ? "" : ",&nbsp;" }}</span
          >
        </p>
      </mat-card-content>
    </mat-card>
  </div>
</div>

다음은 전체search-text.component.ts 파일입니다.

import { Component, OnInit } from '@angular/core';
import * as data from './searchdata.json';

@Component({
  selector: 'app-search-text',
  templateUrl: './search-text.component.html',
  styleUrls: ['./search-text.component.scss'],
})
export class SearchTextComponent implements OnInit {
  public Search: string = null;
  public pets: any = (data as any).default;
  constructor() {}

  ngOnInit(): void {}

  public OnSearched(searchTerm: string) {
    this.Search = searchTerm;
  }
}

구성 요소 검색

검색 텍스트 구성 요소와 마찬가지로 먼저 하이라이트를 제공한 다음 전체 템플릿과 코드를 제공합니다.

search.component.html에서 다음과 같이 사용자로부터 입력을 받습니다.

<input matInput (input)="onSearch($event.target.value)" />

물론 이제 onSearch 메소드를 보여드리겠습니다.

 public onSearch(searchTerm: string): void {
    this.searched.emit(searchTerm);
  }

searched라는 출력 속성은 다음과 같습니다.

@Output() searched = new EventEmitter<string>();

약속한 대로 전체search.component.html 파일은 다음과 같습니다.

<mat-toolbar>
  <span>My Pets</span>
  <span class="spacer"></span>
  <mat-icon aria-hidden="false" aria-label="Example home icon">search</mat-icon>
  <mat-form-field class="form-field">
    <input matInput (input)="onSearch($event.target.value)" />
  </mat-form-field>
</mat-toolbar>

다음은 search.component.ts 파일입니다.

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss'],
})
export class SearchComponent implements OnInit {
  @Output() searched = new EventEmitter<string>();

  constructor() {}

  ngOnInit(): void {}

  public onSearch(searchTerm: string): void {
    this.searched.emit(searchTerm);
  }
}

결론

이 내용이 흥미롭거나 도움이 되었기를 바랍니다. 네 생각을 말해봐. 코드를 보고싶은 분은 열람here .