web-dev-qa-db-ja.com

angular 2.0 $ scope。$ applyと同等

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でビューを更新する好ましい方法は何ですか？

javascriptangularjsangular
22
Tobias Gassmann

ほとんどの場合、ビューを更新するために何もする必要はありません。 zone.js はすべてを行います。

ただし、何らかの理由で手動で変更検出を起動する場合（たとえば、コードがangularゾーンの外で実行されている場合）、 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());
  }
}
15
alexpods

インポートしてみてくださいChangeDetectorRef from angular core as following

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

コンストラクター内

constructor(private chRef: ChangeDetectorRef){
  chRef.detectChanges(); //Whenever you need to force update view
}
45
Hari Das
setTimeout(function(){
//whatever u want here
},0)

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

2
Aishwat Singh