Question

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

是否有办法仅在视图完成渲染时运行代码（或者更好的是，视图内容已更改）？我已经看到了当组件的@Inputs发生变化时执行代码的方法，但是当它的内部方法发生变化时却没有。

Answer 1

目前没有内置支持。

您可以设置*ngFor绑定到setter的内部字段，并在更改时调用方法。

使用

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

应该延迟afterValueChanged()的执行，以便Angular更新DOM。这种方式afterValueChanged()将在事件队列中排队，并且当实际执行此预定事件队列任务时，应该完成Angular。

Answer 2

解决方案（至少，据我所知）：ngAfterViewInit。

import {Component, AfterViewInit} from 'angular2/core';

export class Gallery implements AfterViewInit {

    ngAfterViewInit() {
        $('.gallery')['magnificPopup']({
            delegate: 'a',
            type: 'image',
            gallery: {
                enabled: true
            }
        });
    }
}

显然，忽略了班级的不相关部分。需要在ngAfterViewInit中调用方法的方括号表示法，因为TS编译器在使用点表示法时会抱怨缺少属性（在编译时为true，但不是运行时）。

如何在我的视图（使用其ngFors等）发生变化后才能执行代码？

2 个答案: