Was ist Änderungserkennung? Im folgenden Artikel geht es um den Änderungserkennungsmechanismus in Angular, es wird vorgestellt, wie Statusänderungen die Änderungserkennung benachrichtigen, und ich hoffe, dass er für alle hilfreich ist.
Zusammenfassung: Ein检测机制, der den Komponentenbaum durchläuft, nach Änderungen in jeder Komponente sucht und DOM Aktualisierungen auslöst, wenn sich Komponenteneigenschaften ändern. [Empfohlene verwandte Tutorials: „Angular-Tutorial“]
Die grundlegende Aufgabe der Änderungserkennung besteht darin, den internen状态des Programms zu ermitteln und可见zu machen. Dieser Zustand kann ein beliebiges Objekt, Array oder Basisdatentyp sein.
Ereignisgesteuerte Quellen fallen in die folgenden drei Kategorien:
Ereignisse: Seitenklick, Senden, Maus nach unten ...
XHR: Daten vom Backend-Server abrufen
Timer: setTimeout(), setInterval()
Diese Punkte haben eines gemeinsam: Sie sind alle asynchron. Das heißt, alle异步操作sind die Grundfaktoren, die zu Datenänderungen führen können. Wenn also einige asynchrone Vorgänge ausgeführt werden, kann sich der Status unserer Anwendung ändern. Zu diesem Zeitpunkt müssen Sie die Ansicht aktualisieren
In Angular ist NgZone angeschlossen, das alle异步事件von Angular überwacht Zone.js beim Start einige der zugrunde liegenden Browser-APIs neu schreibt (wodurch alle asynchronen Ereignisse gewaltsam abgefangen werden).
Es gibt zwei gängige Methoden zum Auslösen der Änderungserkennung. Eine Methode basiert auf Komponentenlebenszyklus-Hooks.
ngAfterViewChecked() {
console.log('cluster-master.component cd');
}Eine andere Methode besteht darin, die Änderungserkennung manuell ein- oder auszuschalten und manuell auszulösen
Konstruktor(private cd: ChangeDetectorRef) {
cd.detach()
setInterval(() => {
this.cd.detectChanges()
}, 5000)
} Der Kern von Angular ist die Verschachtelung von Komponenten. Die Änderungserkennung von Angular kann in Komponenten unterteilt werden. Es ist denkbar, dass diese变化检测器ChangeDetector auch einen组件树bilden.
In Angular verfügt jede Komponente über einen eigenen Änderungsdetektor, mit dem wir steuern können, wie und wann die Änderungserkennung für jede Komponente durchgeführt wird.
Angular bietet Entwicklern außerdem die Möglichkeit, Strategien zur Änderungserkennung anzupassen.
Standard:每次Änderungserkennung führt zu einer Änderungserkennung der Komponente, einschließlich Zustandsänderungen其他组件und Änderungen der internen Attributwerte der Referenzvariablen本组件
Onpush: Bei jeder Änderungserkennung wird die Änderungsprüfung dieser Komponente übersprungen, sofern nicht满足一些条件.
4.1 Standard
Der Standardmechanismus zur Änderungserkennung von Angular ist ChangeDetectionStrategy.Default . Nach dem Ende jedes asynchronen Ereignisrückrufs löst NgZone aus, dass整个组件树eine Änderungserkennung至上而下
4.2 onPush
OnPush-Strategie, mit der die Änderungserkennung einer Komponente und所有子组件跳过
Tatsächlich gibt es nach dem Festlegen der OnPush -Richtlinie noch viele Möglichkeiten, die Änderungserkennung auszulösen.
1)引用des @Input Attributs der Komponente ändert sich.
2) DOM -Ereignisse innerhalb der Komponente, einschließlich DOM-Ereignisse ihrer Unterkomponenten, wie z. B. click、submit、mouse down .
3) Observable in der Komponente abonniert das Ereignis und legt gleichzeitig Async pipe fest.
4) Verwenden Sie manuell ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() in der Komponente
markForCheck(): Wird für子组件verwendet该子组件到根组件und den Winkeldetektor zu benachrichtigen, die Komponenten auf diesem Pfad bei der nächsten Änderungserkennung一定überprüfen, selbst wenn die Änderungserkennungsstrategie auf onPush eingestellt ist
discoverChanges(): Initiieren Sie manuell die Änderungserkennung von该组件到各个子组件
detach():脱离den Detektor der Komponente von der Anzahl der Detektoren und werden Sie nicht mehr vom Erkennungsmechanismus gesteuert, sofern er nicht erneut angebracht wird.
reattach():重新链接den abgetrennten Detektor erneut mit dem Detektorbaum