只有在我的视图（及其 ngFors 等）发生更改后，我如何才能执行代码？答案

【问题标题】：How can I execute code only after my view (with its ngFors and the like) has changed?只有在我的视图（及其 ngFors 等）发生更改后，我如何才能执行代码？
【发布时间】：2016-03-15 12:54:40
【问题描述】：

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

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

【问题讨论】：

当页面上的元素过多时，您应该使用changeDetectionStrategy.OnPush 以防止由于负载过重而导致滞后和崩溃，更多信息，see this similar question

标签： angular

【解决方案1】：

目前没有内置支持。

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

使用

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

应该延迟 afterValueChanged() 的执行，足以让 Angular 完成更新 DOM。这样afterValueChanged() 将被排入事件队列，Angular 应该在这个计划的事件队列任务实际执行时完成。

【讨论】：

【解决方案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，但在运行时不是）。

【讨论】：

是否需要 AfterContentInit，因为它不会等待 ngFor 完成？
@eesdil 可能 - 到目前为止，它 (ngAfterViewInit) 似乎对我有用，但可能不适用于迭代数组中的更多元素。