angular 2.0 相当于 $scope.$apply

Question

我正在尝试开始使用 angular 2.0，现在我想知道在某些外部事件更改数据后如何启动对视图的更新。

详细来说，我有一个 google 地图和地图上点击事件的处理程序。用户点击地图后，我将点击的纬度和经度存储到控制器上的变量中

this.lat = event.latLng.lat();
this.lon = event.latLng.lon();

在视图中我想显示这些值

<div> this is my spot: {{lat}} and {{lon}} </div>

在 angular 1 中，我会简单地将控制器中的赋值包装在对 $scope.$apply() 的调用中。

在 Angluar 2.0 中更新视图的首选方法是什么？

Answer 1

setTimeout(function(){
//whatever u want here
},0)

参考：http://blog.mgechev.com/2015/04/06/angular2-first-impressions/

Answer 2

大多数情况下，您不需要执行任何操作来更新视图。 zone.js 会为你做一切。

但是如果出于某种原因你想手动触发更改检测（例如，如果你的代码运行在 angular 区域之外）你可以使用 LifeCycle::tick() method to do it. See this plunker

import {Component, LifeCycle, NgZone} from 'angular2/angular2'

@Component({
  selector: 'my-app',
  template: `
    <div>
      Hello world!!! Time: {{ time }}.
    </div>
  `
})
export class App {
  time: number = 0;

  constructor(lc: LifeCycle, zone: NgZone) {
    zone.runOutsideAngular(() => {
      setInterval(() => {
        this.time = Date.now();

        lc.tick(); // comment this line and "time" will stop updating
      }, 1000);
    })
  }
  doCheck() {
    console.log('check', Date.now());
  }
}

Answer 3

尝试从 angular 核心导入 ChangeDetectorRef，如下所示

import {Component, ChangeDetectorRef} from '@angular/core';

在构造函数中

constructor(private chRef: ChangeDetectorRef){
  chRef.detectChanges(); //Whenever you need to force update view
}

angular 2.0 相当于 $scope.$apply

angular 2.0 equivalent to $scope.$apply

javascript

angularjs

angular