Angular 2如何让Angular检测Angular之外的变化？

Question

我正在尝试创建一个简单的示例项目来测试角度2更改检测机制:我在主索引页面上的脚本标记中创建一个纯javascript对象.它包含以下内容:

        var Tryout = {};
        Tryout.text = "Original text here";
        Tryout.printme = function(){
            console.log(Tryout.text);
        }
        Tryout.changeme = function(){
            Tryout.text = "Change was made";
        }

一个用于控制台登录的功能,另一个用于更改文本属性.

现在在Angular 2中,代码如下所示:

import {Component} from "angular2/core"

@Component({
    selector: 'my-app',
    template: `
        <h1>{{TryoutRef.text}}</h1>
        <input type="text" [(ngModel)]="TryoutRef.text">
        <button (click)="consoleLogMe()">Console Log</button>
        <button (click)="changeMe()">Change me inside</button>
    `
})

export class MyApp{

    TryoutRef:any = Tryout;
    constructor(){
    }
    changeMe(){
        this.TryoutRef.changeme();
    }
    consoleLogMe(){
        console.log(this.TryoutRef.text);
    }

}
declare var Tryout:string;

我想要做的是:当我通常使用onclick(完全在角度之外)调用函数Tryout.printme()时,我希望angular检测更改并更新屏幕.

我成功了这一点:当我从组件调用Tryout.printme()时(changeme()函数调用Tryout.printme()),Angular检测到更改并更新UI,这很好.此外,当我从外部角度更改并从Angular调用consoleLogMe()时,它会记录更改的文本并更新UI.

我想我需要在Angular以某种方式运行的同一区域中执行Tryout.changeme().有任何想法吗？我有一个很大的项目,它是在纯javascript/jquery中完成的,现在我慢慢地需要将把手模板重写为angular2组件而不触及模型(尚未).为此,我需要强制模型在与角度相同的区域中执行.

如果我想在Angular 1中执行类似的操作,我只需要$ scope.$ apply它可以工作.

这是示例中的gif:

Answer 1

您可以通过NgZone在Angular应用程序内导出来完成此操作.通常,你应该在Angular中做所有的事情,但是如果你真的想要从Angular中执行你的逻辑,你需要正确zone,正如你所说的那样.

正如此问题所示,这个技巧滥用Angular的依赖注入并挂钩注入zone的window对象.声明依赖关系并将其分配给导出.NgZonewindow.zoneImpl

//our root app component
import {Component, NgZone} from 'angular2/core'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

    </div>
  `,
})
export class App {
  constructor(zone: NgZone) {
    this.name = 'Angular2'
    window.app = this
    window.zoneImpl = zone
  }
}

在Angular bootstrapping之后,你应该有一个zoneImpl全局变量.您可以使用该run方法关闭Angular.

zoneImpl.run(() => window.app.name = "new name!")

现场演示.