角度 2.0 相当于 $scope.$apply答案

【问题标题】：angular 2.0 equivalent to $scope.$apply角度 2.0 相当于 $scope.$apply
【发布时间】：2016-01-15 10:09:12
【问题描述】：

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

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

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

在视图中我想显示这些值

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

在 Angular 1 中，我只需将分配在控制器中包装在对 $scope.$apply() 的调用中。

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

【问题讨论】：

标签： javascript angularjs angular

【解决方案1】：

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

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

【讨论】：

这行得通。有用的事实是你甚至不需要最后的 ,0 。您可以完全跳过该参数。

【解决方案2】：

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

但是如果出于某种原因您想手动触发更改检测（例如，如果您的代码在角度区域之外运行），您可以使用LifeCycle::tick() 方法来执行此操作。见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());
  }
}

【讨论】：

谢谢！看起来我在角度区域之外（在谷歌地图的点击回调内）。调用 lc.tick() 就可以了：-)
嗯，也许NgZone:run 更适合您的用例。它在角度区域内执行回调，执行后运行 LifeCycle.tick()。
我同意@alexpods。还有另一个问题可以这样解决，NgZone:run (stackoverflow.com/questions/31352397/…)
另一种方法是像这样使用ChangeDetectorRef：this.chRef.detectChanges()。
LifeCycle 不再存在：/

【解决方案3】：

尝试从角核心导入 ChangeDetectorRef 如下

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

在构造函数中

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

【讨论】：

在新的 Angular 版本中是 import {Component, ChangeDetectorRef} from '@angular/core';