Estou tentando criar um projeto de exemplo simples para testar o mecanismo de detecção de alterações angular 2: Crio um objeto javascript puro em tags de script na página principal de índice. contém o seguinte:

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

Uma função para console registrá-lo e outra para alterar a propriedade de texto.

Agora, no Angular 2, o código fica assim:

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;

O que estou tentando fazer é o seguinte: Quando chamo a função Tryout.printme () normalmente com onclick (completamente fora do angular), quero que o angular detecte a alteração e atualize a tela.

Consegui até este ponto: Quando eu chamo Tryout.printme () do componente (a função changeme () está chamando Tryout.printme ()), o Angular detecta a alteração e atualiza a interface do usuário, o que é bom. Além disso, quando mudo de fora do angular e chamo consoleLogMe () de Angular, ele registra o texto alterado e atualiza a interface do usuário.

Acho que preciso executar o Tryout.changeme () na mesma zona em que o Angular está sendo executado. Alguma ideia? Eu tenho um grande projeto que é feito em javascript / jquery puro e agora preciso reescrever lentamente os modelos de guiador em componentes angular2 sem tocar no modelo (ainda). Para isso, preciso forçar o modelo a executar na mesma zona que o angular.

Se eu quisesse fazer algo parecido com isto no Angular 1, apenas $ scope. $ Apply funcionaria.

Aqui está um gif do exemplo: