更新视图（DOM）后的调用方法（在Angular 2中）

Question

Assume that I have the following directive:

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
  }
}

I'm using it in somewhere in a template: ...<select my-select [(ngModel)]="someReference">...

At some point I change the value of someReference in a component: someReference = "newValue"

What is happening now: The doSomeStuffAfterViewIsUpdated function is called before the DOM is updated. Which means the console shows the old value of the select.

What I want: The doSomeStuffAfterViewIsUpdated function should be called after the DOM is updated by angular, so the console shows the "newValue".

What should I use instead of ngOnChanges to make it work like I want?

Please note that the important thing here is that the code should run after the DOM update. The question is not about how can I access the new value of the element.

Thx!

Answer 1

I'm a bit late to the party, but since I had a similar problem and a probable solution, I thought I'd share:

What you're looking for is MutationObservers ( CanIUse ); I solved a very similar issue with a directive similar to this (simplified for... simplicity? :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;
    }
}

The MutationObserver callback will be triggered when either an attribute, children, etc is modified in the DOM (or added, deleted, etc)

It is possible you won't need the ngOnChanges at all depending on your use case and it would make the code a bit cleaner too.