2角变化检测 [英] Angular 2 Change detection

问题描述

我想创建一个简单的例子项目来测试角2变化检测机制：我创建脚本标记纯JavaScript对象在主索引页上。它包含以下内容：

I am trying to create a simple example project to test the angular 2 change detection mechanism: I create a pure javascript object in script tags on the main index page. it contains the following:

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

一个功能来安慰记录它，一个更改文本属性。

One function to console log it, and one to change the text property.

现在在角2 code是这样的：

Now in Angular 2 the code looks like this:

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（）通常我想要的角度来检测变化和更新屏幕。

What I am trying to do is this: When I call the function Tryout.printme() normally with onclick (Completely outside of angular) I want angular to detect the change and update the screen.

我成功了这一点：当我打电话Tryout.printme（）从组件（changeme（）函数是调用Tryout.printme（）），角检测更改并更新这是很好的用户界面。此外，当我从外面的角度改变，我从打电话角度consoleLogMe（）这是记录更改的文本，并更新UI。

I succeeded to this point: When I call Tryout.printme() from the component (the changeme() function is calling Tryout.printme()), Angular detects the change and updates the UI which is fine. Also, when I change from outside angular and I call consoleLogMe() from Angular it is logging the changed text and updates the UI.

我想我需要在角在某种程度上运行同一区域执行Tryout.changeme（）。有任何想法吗？我有一个大项目，该项目是纯粹的JavaScript / jQuery的做了，现在我慢慢地需要重写车把模板angular2组件而不触及模型（还）。为此，我需要强制模型在同一区域的角度来执行。

I guess I need to execute Tryout.changeme() in the same Zone that Angular is running in somehow. Any ideas? I have a big project which is done in pure javascript/jquery, and now I slowly need to rewrite the handlebar templates to angular2 components without touching the model (yet). For that I need to force the model to execute in the same zone as angular.

的如果我想要做这样的事情在角1我只想$范围。$应用它会工作。的

下面是来自例子GIF：

推荐答案

您可以通过导出 NgZone 您的角应用程序内做到这一点。
通常情况下，你应该做的所有的事情里面角，但如果你真的要执行你的逻辑出的角度，你需要得到正确的区，正如你所说。

You can do this by exporting NgZone inside your Angular app. Usually, you should do all things inside Angular, but if you really want to execute your logic out of Angular, you need to get the right zone, as you have said.

这招被滥用角的依赖注入和钩上的窗口对象注入区，为的这个问题节目。在 NgZone 声明的依赖，并出口分配给 window.zoneImpl 。

This trick is abusing Angular's dependency injection and hooking the injected zone on window object, as this issue shows. Declaring a dependency on NgZone, and assigning it to window.zoneImpl for exporting.

//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 全局变量。您可以使用运行的方法来踢角了。

After Angular bootstrapping, you should have a zoneImpl global variable. You can use the run method to kick Angular off.

zoneImpl.run（（）=＆gt;中！新的名字window.app.name =）

现场演示。

这篇关于2角变化检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！