我正在尝试创建一个简单的示例项目来测试 angular 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() 时(完全在角度之外),我希望角度来检测变化并更新屏幕。
我成功地做到了这一点:当我从组件调用 Tryout.printme() 时(changeme() 函数正在调用 Tryout.printme()),Angular 会检测到更改并更新 UI,这很好。此外,当我从外部角度更改并从 Angular 调用 consoleLogMe() 时,它会记录更改的文本并更新 UI。
我想我需要在 Angular 以某种方式运行的同一个区域中执行 Tryout.changeme() 。有任何想法吗?我有一个用纯 javascript/jquery 完成的大项目,现在我需要慢慢地将车把模板重写为 angular2 组件而不触及模型(还)。为此,我需要强制模型在与角度相同的区域中执行。
如果我想在 Angular 1 中做这样的事情,我只需 $scope.$apply 就可以了。
这是示例中的 gif: