Angular 2.0 эквивалентно $scope. $apply

Я пытаюсь начать с angular 2.0, теперь мне было интересно, как я могу инициировать обновление для представления после того, как некоторые внешние события изменили данные.

Подробно у меня есть карта google и обработчик события click на карте. После того, как пользователь нажимает на карту, я сохраняю широту и долготу щелчка в переменных на контроллере.

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?

Ответы

Ответ 1

В основном, вам не нужно ничего делать, чтобы обновлять представление. zone.js сделает все для вас.

Но если по какой-то причине вы хотите вручную открыть обнаружение изменений (например, если ваш код работает за пределами зоны angular), вы можете использовать LifeCycle::tick() метод для этого. Смотрите этот плункер

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

Ответ 2

Попробуйте импортировать ChangeDetectorRef из углового ядра следующим образом

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

в конструкторе

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