角度2如何获取角度来检测外部角度的变化？

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";
        }

一个函数用于控制台记录它，另一个函数用于更改text属性。

在角度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()时，我希望能够检测到变化并更新屏幕。

我成功地做到了这一点:当我从组件调用Tryout.printme()时( changeme()函数正在调用Tryout.printme())，角度检测变化并更新UI，这很好。此外，当我从外部角度更改并从角度调用consoleLogMe()时，它正在记录已更改的文本并更新UI。

我想我需要在角运行的同一区域执行Tryout.changeme()。有什么想法吗？我有一个用纯javascript/jquery完成的大型项目，现在我需要缓慢地将工具栏模板重写到angular2组件，而不需要接触模型。为此，我需要强制模型在与角相同的区域执行。

如果我想做这样的事情，在角度1，我只需要$scope.$apply，它会工作。

这里是示例中的gif：

​

​

Answer 1

您可以通过在您的角度应用程序中导出NgZone来做到这一点。通常，你应该在角度内做所有事情，但是如果你真的想从角度上执行你的逻辑，你需要得到正确的zone，就像你已经说过的。

这个技巧是滥用角的依赖注入，并将注入的zone与window对象挂钩，如本期所示。声明NgZone上的依赖项，并将其分配给window.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
  }
}

在角引导之后，您应该有一个zoneImpl全局变量。您可以使用run方法启动角度。

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

现场演示。