Angular：ngFor内自定义指令提前更新，求替代setTimeout的方案

Hey there! Let's fix that hacky setTimeout in your highlight directive. The core problem is timing: when your directive's ngOnChanges triggers, Angular often hasn't finished rendering the fresh list items yet. That means you're trying to highlight text in old DOM content. The setTimeout works because it delays your code until the next event loop (after the DOM updates), but we can use proper Angular patterns to avoid this workaround entirely.

Why the setTimeout works (and why it's a hack) #

Angular batches DOM updates during its change detection cycle. When your component gets the new personList from the API, Angular marks the component for change detection, but the actual DOM update doesn't happen immediately. Your directive's ngOnChanges runs before this DOM update, so it can't access the new text content. The setTimeout shoves your code into the next macro task, giving Angular time to finish rendering the new items.

Solution 1: Use ngAfterViewChecked with guards #

You can switch to the ngAfterViewChecked lifecycle hook, which runs after Angular has finished updating the view. To avoid running the highlight logic on every single change detection cycle (which would cause performance issues), add guards to only run when the query or the element's content changes:

import { Directive, Input, ElementRef, Renderer2, AfterViewChecked } from '@angular/core';

@Directive({ selector: '[appQueryHighlight]' })
export class QueryHighlightDirective implements AfterViewChecked {
  @Input('appQueryHighlight') query: string;
  private lastQuery: string;
  private lastContent: string;
  private paragraphElement: HTMLParagraphElement;

  constructor(private element: ElementRef, private renderer: Renderer2) {
    this.paragraphElement = this.element.nativeElement as HTMLParagraphElement;
  }

  ngAfterViewChecked() {
    // Only run if query or content has changed
    if (this.query !== this.lastQuery || this.paragraphElement.innerHTML !== this.lastContent) {
      this.applyHighlight();
      this.lastQuery = this.query;
      this.lastContent = this.paragraphElement.innerHTML;
    }
  }

  private applyHighlight() {
    let text = this.paragraphElement.textContent.trim();
    
    // Clear existing spans first
    this.paragraphElement.innerHTML = text;

    if (!this.query) return;

    const queryUpper = this.query.toUpperCase();
    const textUpper = text.toUpperCase();
    const matchPos = textUpper.indexOf(queryUpper);

    if (matchPos >= 0) {
      // Create span for text before the match
      const preSpan = this.renderer.createElement('span');
      preSpan.textContent = text.slice(0, matchPos);

      // Create highlighted span for the query match
      const highlightSpan = this.renderer.createElement('span');
      highlightSpan.textContent = text.slice(matchPos, matchPos + this.query.length);
      this.renderer.setStyle(highlightSpan, 'color', 'red');
      this.renderer.setStyle(highlightSpan, 'text-decoration', 'underline');

      // Create span for text after the match
      const postSpan = this.renderer.createElement('span');
      postSpan.textContent = text.slice(matchPos + this.query.length);

      // Replace content with the new spans
      this.paragraphElement.innerHTML = '';
      this.renderer.appendChild(this.paragraphElement, preSpan);
      this.renderer.appendChild(this.paragraphElement, highlightSpan);
      this.renderer.appendChild(this.paragraphElement, postSpan);
    }
  }
}

Solution 2: Use an Angular Pipe (Recommended!) #

A better approach is to use an Angular Pipe, which is designed for transforming data in templates. Pipes automatically re-run when their input data changes, and they sync with Angular's change detection cycle—so you won't have timing issues at all.

Step 1: Create the Highlight Pipe

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Pipe({ name: 'highlight' })
export class HighlightPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}

  transform(text: string, query: string): SafeHtml {
    if (!query || !text) return text;

    // Use a regex to find all case-insensitive matches
    const regex = new RegExp(`(${query})`, 'gi');
    const highlightedText = text.replace(regex, '<span style="color: red; text-decoration: underline;">$1</span>');
    
    // Bypass sanitization since we're adding safe, controlled HTML
    return this.sanitizer.bypassSecurityTrustHtml(highlightedText);
  }
}

Step 2: Use the Pipe in Your Template

Update your app-person-item template to use the pipe directly on the text you want to highlight:

<!-- app-person-item.component.html -->
<p [innerHTML]="person.name | highlight: query"></p>
<p [innerHTML]="person.surname | highlight: query"></p>
<p [innerHTML]="person.age.toString() | highlight: query"></p>

Step 3: Declare the Pipe in Your Module

Make sure to add the pipe to your module's declarations so it's available in your templates:

import { NgModule } from '@angular/core';
import { HighlightPipe } from './highlight.pipe';

@NgModule({
  declarations: [HighlightPipe],
  exports: [HighlightPipe] // Export if you need to use it in other modules
})
export class PipesModule {}

Bonus: Optimize Your API Calls #

While we're at it, let's improve your search performance by adding debouncing to your API requests. This prevents a request from being sent on every single keystroke:

import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';
import { debounceTime, switchMap } from 'rxjs/operators';
import { DebtsService } from './debts.service';

@Component({ /* ... */ })
export class PersonListComponent implements OnInit {
  personList: any[] = [];
  query = '';
  private querySubject = new Subject<string>();

  constructor(private debtsService: DebtsService) {}

  ngOnInit() {
    this.querySubject.pipe(
      debounceTime(300), // Wait 300ms after last keystroke before sending request
      switchMap(query => this.debtsService.getFilteredDebts(query))
    ).subscribe({
      next: data => this.personList = data,
      error: err => console.log('Error occurred:', err)
    });
  }

  onSearchInput(query: string) {
    this.querySubject.next(query);
  }
}

Then bind your search input to the onSearchInput method:

<input type="text" (input)="onSearchInput($event.target.value)" placeholder="Search...">

This makes your app feel snappier and reduces unnecessary API load.

内容的提问来源于stack exchange，提问作者Marek