如何判断Angular(2+)组件投影内容是否变更？含钩子及替代方案问询

Great question! Angular's ngAfterContentChecked hook is handy but doesn't directly tell you if projected content actually changed during the check. Let's break down how to track that, plus alternative approaches that might fit your use case better.

Tracking Changes with ngAfterContentChecked #

Since ngAfterContentChecked fires every time Angular runs a content check (even if nothing changed), you'll need to manually compare the current state of the projected content to a saved previous state. Here's a straightforward implementation:

1. Grab a reference to your projected content using @ContentChild or @ContentChildren.
2. Store a snapshot of its state (like trimmed innerHTML, or a custom computed value) after each check.
3. On each hook run, compare the current state to the saved one to detect actual changes.

Example code:

import { Component, ContentChild, ElementRef, AfterContentChecked } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<ng-content #projectedContent></ng-content>`
})
export class MyComponent implements AfterContentChecked {
  @ContentChild('projectedContent', { static: false }) projectedContent!: ElementRef<HTMLElement>;
  private previousContentState: string = '';

  ngAfterContentChecked(): void {
    const currentContent = this.projectedContent.nativeElement.innerHTML.trim();
    if (currentContent !== this.previousContentState) {
      console.log('Projected content changed!');
      // Run your change-handling logic here
      this.previousContentState = currentContent;
    }
  }
}

Note: Using innerHTML works for simple cases, but for complex content with dynamic bindings, you might want to track specific properties or create a custom state object instead—since innerHTML won't catch subtle changes like attribute updates that don't alter the HTML string.

Alternative Approaches (Without ngAfterContentChecked) #

1. Use Angular CDK's ContentObserver #

The ContentObserver from @angular/cdk/observers lets you watch for DOM mutations in specific elements, including projected content. This is more efficient than ngAfterContentChecked because it only triggers when actual changes happen, not on every check cycle.

Example:

import { Component, ContentChild, ElementRef, OnInit, OnDestroy } from '@angular/core';
import { ContentObserver } from '@angular/cdk/observers';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-my-component',
  template: `<ng-content #projectedContent></ng-content>`
})
export class MyComponent implements OnInit, OnDestroy {
  @ContentChild('projectedContent', { static: true }) projectedContent!: ElementRef<HTMLElement>;
  private contentSubscription!: Subscription;

  constructor(private contentObserver: ContentObserver) {}

  ngOnInit(): void {
    this.contentSubscription = this.contentObserver.observe(this.projectedContent.nativeElement)
      .subscribe(() => {
        console.log('Projected content changed!');
        // Handle the change here
      });
  }

  ngOnDestroy(): void {
    this.contentSubscription.unsubscribe();
  }
}

Don't forget to import ObserversModule from @angular/cdk/observers in your feature module to use this.

2. Track Input Dependencies with ngOnChanges #

If your projected content's changes are tied directly to input properties of your component, you can use ngOnChanges to detect when those inputs update (which implies the projected content likely changed too).

Example:

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: `<ng-content></ng-content>`
})
export class MyComponent implements OnChanges {
  @Input() contentData: any;

  ngOnChanges(changes: SimpleChanges): void {
    if (changes['contentData']) {
      console.log('Input updated—projected content likely changed!');
      // Run your logic here
    }
  }
}

This works best when the projected content relies on the contentData input, so changes to the input will directly trigger updates to the content.

内容的提问来源于stack exchange，提问作者mas.morozov