从外部更新 angular 个视图

Question

我在 window 对象上有一个函数可以更改我的 angular4 应用程序中的数据，但是在我单击 [=23= 中的输入之一之前，视图不会更新] 应用程序。有没有办法让它立即更新？

我认为这与 Angular 区域有关，对吗？

代码：

在下面的代码中，vm 引用了我的 Angular 组件。

        window.callback = function(data) {
            vm.setKey(data.result);
        }

下面的函数在 Angular 组件中，并且正确地正确设置了数据，但是直到再次与应用交互时它才在视图中更新。

setKey(result) {
    this.key = result;
}

Answer 1

如果您想在函数中手动触发 Angular 变化检测循环，您可以将对 ChangeDetectorRef 的引用注入到组件中，然后调用 detectChanges() 方法开火。

看起来像这样：

// import ChangeDetectorRef
import { ChangeDetectorRef } from '@angular/core'

// Your component's constructor
constructor(changeDetector : ChangeDetectorRef)
{ ... }

// Your setKey method
setKey(result) {
    this.key = result;
    this.changeDetector.detectChanges();
}

您可以在 Angular 此处详细了解变化检测的工作原理：https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

从外部更新 angular 个视图

updating angular view from outside

zones

angular