仅在视图(及其ngFors等)已更改后，如何才能执行代码? [英] How can I execute code only after my view (with its ngFors and the like) has changed?

问题描述

我正在尝试对装满图像的页面实施MagnificPopup解决方案.因为它们是通过* ngFor渲染的，所以用于初始化弹出功能的代码在渲染图像之前运行.

I'm trying to implement a MagnificPopup solution to a page full of images. Because they're rendered via an *ngFor, the code to initialise the popup functionality is run before the images have rendered.

是否只有在视图完成渲染(或者更好的是，视图内容已更改)后才运行代码?我已经看到了当组件的@Inputs更改时执行代码的方法，但是当其内部方法更改时却没有.

Is there a way to run the code only when the view has finished rendering (or, even better, the view contents has changed)? I've seen ways to execute code when a component's @Inputs change, but not when its internal methods do.

推荐答案

当前没有内置支持.

您可以使内部字段将*ngFor绑定到setter并在更改它们时调用方法.

You can make your internal fields that *ngFor is bound to setters and call methods when they're changed.

使用

set someValue(newValue) {
  this._someValue = newValue;
  setTimeout(() => afterValueChanged(),10);
}

应该充分延迟afterValueChanged()的执行，以使Angular完成DOM的更新.这样，afterValueChanged()将进入事件队列，并且在实际执行此计划的事件队列任务时应完成Angular.

should delay execution of afterValueChanged() enough for Angular being done updating the DOM. This way afterValueChanged() will be enqueued in the event queue and Angular should be done when this scheduled event queue task is actually executed.

这篇关于仅在视图(及其ngFors等)已更改后，如何才能执行代码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！