javascript – 更新视图(DOM)后的调用方法(在Angular 2中)

2023年2月9日 213次阅读

假设我有以下指令：

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更新后运行.问题不在于如何访问元素的新值.

谢谢！

最佳答案 我参加聚会有点晚了,但由于我有类似的问题和可能的解决方案,我想我会分享：

你要找的是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,它也会使代码更清洁.

点赞