Question

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

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

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

在视图中我想显示这些值

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

在角度1中，我只需在$ scope的调用中将赋值包装在控制器中。$ apply（）。

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

Answer 1

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

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

构造函数中的

Select O.TrainDate, O.RailHead, O.Position as Pos, 
    O.Iso, C.CustomerName + ' (' + O.Customer + ')' as Customer, 
    P.ProductName + ' ('+O.Product +')' as Product, 
    O.Target, O.Docket, o.Gross, o.Tare ,o.Net, o.ConNote, o.Description 
from IsoOrders O, Customer C, Product P
where o.Customer = c.Customer 
    and p.Product = o.Product
    and o.Traindate >= '12-14-2016'
    and o.Iso = '040'

Answer 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());
  }
}

Answer 3

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

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

角度2.0相当于$ scope。$ apply

3 个答案: