Call-Methode nach Ansicht (DOM) aktualisiert (in Angular 2)

Question

wird angenommen, dass ich die folgende Direktive haben:

import {Directive, Input, OnChanges } from '@angular/core' 

@Directive({ 
    selector: 'select[my-select]' 
}) 
export class NbSelect implements OnChanges { 

    @Input() ngModel; 

    constructor() { 
    } 

    ngOnChanges(changes) { 
    doSomeStuffAfterViewIsUpdated(); 
    } 

    doSomeStuffAfterViewIsUpdated() { 
    console.log(jQuery('select[my-select]').val()); // this should write the new value 
    } 
} 

Ich verwende es in irgendwo in einer Vorlage: ...<select my-select [(ngModel)]="someReference">...

Bei einigen Punkt ändere ich den Wert von someReference in einer Komponente: someReference = "newValue"

Was jetzt geschieht: die doSomeStuffAfterViewIsUpdated Funktion vor dem DOM aktualisiert wird aufgerufen. Das bedeutet, dass die Konsole den alten Wert der Auswahl anzeigt.

Was ich will: Die doSomeStuffAfterViewIsUpdated Funktion sollte aufgerufen werden, nachdem das DOM von eckigen aktualisiert wurde, so dass die Konsole den "newValue" zeigt.

Was sollte ich anstelle von ngOnChanges verwenden, damit es funktioniert wie ich will?

Bitte beachten Sie, dass die wichtige Sache hier ist, dass der Code nach dem DOM-Update laufen sollte. Die Frage ist nicht, wie ich auf den neuen Wert des Elements zugreifen kann.

Thx!

Answer 1

Ich bin ein bisschen spät, um die Partei, aber da ich ein ähnliches Problem und eine wahrscheinliche Lösung hatte, dachte ich, ich würde Aktie:

Was Sie suchen ist MutationObservers (CanIUse); löste ich ein sehr ähnliches Problem mit einer Richtlinie wie folgt aus (vereinfacht für ... Einfachheit: P):

ngOnChanges() { 
    this.observer = new MutationObserver(() => { this.methodToCall() }); 
    this.observer.observe(this.elRef.nativeElement, this.observerOptions); // See linked MDN doc for options 
} 

private methodToCall(): void { 
    this.observer.disconnect(); 
} 

ngOnDestroy() { 
    if(this.observer) { 
     this.observer.disconnect(); 
     this.observer = undefined; 
    } 
} 

Der MutationObserver Rückruf ausgelöst wird, wenn entweder ein Attribut, Kinder, etc. in die modifiziert DOM (oder hinzugefügt, gelöscht, usw.)

Es ist möglich, dass Sie die ngOnChanges überhaupt nicht benötigen, abhängig von Ihrem Anwendungsfall, und es würde den Code ein wenig sauberer machen.