javascript / expert
Snippet
DOM-Lebenszyklus-Überwachung mittels ElementRef MutationObserver-Direktive
Direkte DOM-Überwachung mit dem nativen MutationObserver innerhalb einer Angular-Direktive. Die Ausführung außerhalb von Change Detection mittels NgZone verhindert unnötige Change-Detection-Zyklen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Directive, ElementRef, inject, DestroyRef, NgZone } from '@angular/core';@Directive({ selector: '[appDomAudit]', standalone: true })export class DomAuditDirective {private el = inject(ElementRef);private ngZone = inject(NgZone);private destroyRef = inject(DestroyRef);constructor() {this.ngZone.runOutsideAngular(() => {const observer = new MutationObserver(records => console.log('DOM Mutation detected:', records.length));observer.observe(this.el.nativeElement, { childList: true, subtree: true });this.destroyRef.onDestroy(() => observer.disconnect());});}}
angular
Erklärung
1
private ngZone = inject(NgZone);
Injiziert NgZone zur Steuerung, ob Code innerhalb oder außerhalb der Angular-Ereignisschleife läuft.
2
this.ngZone.runOutsideAngular(() => {
Führt Setup außerhalb der Zone aus, um das Auslösen der Change Detection bei DOM-Änderungen zu vermeiden.
3
const observer = new MutationObserver(...)
Instanziiert den nativen Browser-MutationObserver zur Überwachung von DOM-Strukturänderungen.
4
this.destroyRef.onDestroy(() => observer.disconnect());
Registriert Bereinigungslogik über die DestroyRef-API zur Vermeidung von Speicherlecks beim Zerstören der Direktive.