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：