Question

假设我有以下指令：

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

我在模板中的某个地方使用它：...<select my-select [(ngModel)]="someReference">...

在某些时候，我更改了组件中someReference的值：someReference = "newValue"

现在发生了什么：在更新DOM之前调用doSomeStuffAfterViewIsUpdated函数。这意味着控制台显示选择的旧值。

我想要的是什么：在DOM更新DOM之后应该调用doSomeStuffAfterViewIsUpdated函数，因此控制台显示“newValue”。

我应该使用什么而不是ngOnChanges来使它像我想要的那样工作？

请注意，重要的是代码应该在DOM更新后运行。问题不在于如何访问元素的新值。

THX！

Answer 1

我参加聚会有点晚了，但由于我有类似的问题和可能的解决方案，我以为我会分享：

您正在寻找的是MutationObservers（CanIUse）; 我用类似于此的指令解决了一个非常类似的问题（简化为......简单？：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;
    }
}

当在DOM中修改属性，子等等（或添加，删除等）时，将触发MutationObserver回调

根据您的使用情况，您可能根本不需要ngOnChanges，这样可以使代码更清晰。

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

1 个答案: