Angular Change Detection für Array Input

Die Change Detection von Angular wird immer ausgeführt bei einem Array Input, wenn sich die Referenz des Arrays ändert, aber nicht der Inhalt:

console.log([1] === [1]); // ergibt false

In Angular kann man die Change Detection beeinflussen, indem man die Strategie der Change Detection für eine Komponente ändert. Eine der Strategien ist die „OnPush“-Strategie, bei der die Change Detection nur dann ausgelöst wird, wenn sich die Eingangsparameter einer Komponente ändern oder wenn ein Ereignis aufgerufen wird.

Um sicherzustellen, dass die Change Detection nur ausgeführt wird, wenn das Input-Array geändert wurde, können Sie den OnPush-Strategie für die Komponente verwenden und eine Überwachungsfunktion für das Input-Array hinzufügen, die nur dann ausgelöst wird, wenn sich die Werte des Arrays ändern.

Hier ist ein Beispiel einer solchen Komponente:

import { Component, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: '...',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ExampleComponent {
  @Input() items: any[] = [];

  constructor(private cd: ChangeDetectorRef) { }

  ngOnChanges(changes: any) {
    if (changes.items &amp;&amp; !this.arrayEquals(changes.items.previousValue, changes.items.currentValue)) {
      this.cd.markForCheck();
    }
  }

  private arrayEquals(a: any[], b: any[]): boolean {
    return JSON.stringify(a) == JSON.stringify(a);
  }
}

Somit wird die Komponente nur neu gerendert, wenn sich an dem Items Array wirklich etwas ändert und nicht nur die Referenz.