data-binding - 对 Angular2 之外所做的更改使用react

Question

我有一个使用相当基本的 JS 制作的非 Angular 页面，我认为尝试添加学习一些 Angular2 并将其用于一些新功能是一个绝妙的主意。

我的计划是将一个 Angular2 组件绑定(bind)到一个由旧代码更新的对象，然后我将使用 Angular2 魔术来更新一大块 UI。

问题是我无法说服 Angular2 对外部 JS 中所做的任何更改使用react。这样做有什么诀窍？尝试用谷歌搜索这个问题导致对 Angular2 的变化检测过程的深入解释，到目前为止这还没有帮助。这只是一个糟糕的想法吗？

我找到了一个随机的 Angular2 jsfiddle 并将其破解以显示问题。字符串被添加到“window.names”中，但是直到从 Angular 一侧添加一个字符串之前您看不到它们:https://jsfiddle.net/byfo3jg3/ .代码如下:

var names = ['Joe'];

setTimeout(function() {
  names.push("Frank");
}, 1000);

setTimeout(function() {
  names.push("Sterve");
}, 2000);

setTimeout(function() {
  names.push("Garfield");
}, 3000);

(function() {
  var HelloApp,
        ListThing;

    ListThing = ng
        .Component({
            selector: 'list-thing',
            template: '<ul><li *ng-for="#name of names">{{name}}</li></ul>',
            directives: [ng.NgFor]
        })
        .Class({
            constructor: function() {
                this.names = window.names;

        setTimeout(function() {
                    this.names.push("Oh hai");
                }.bind(this), 10000);
            }
        });

    HelloApp = ng
        .Component({
            selector: 'hello-app',
            template: '<list-thing></list-thing>',
            directives: [ListThing]
        })
        .Class({
            constructor: function() {}
        });

    document.addEventListener('DOMContentLoaded', function() {
        ng.bootstrap(HelloApp);
    });
}());

Answer 1

您需要将 NgZone 设置为 window 对象，然后调用该区域的运行函数。

请引用Angular 2 How to get Angular to detect changes made outside Angular?所以问题