Pytanie kątowy odpowiednik 2.0 do $ scope. $ apply


Próbuję zacząć od kątowego 2.0, teraz zastanawiałem się, jak mogę zainicjować aktualizację widoku po jakimś zewnętrznym zdarzeniu, które zmieniło dane.

W szczegółach mam mapę google i przewodnik po zdarzeniu kliknięcia na mapie. Po kliknięciu przez użytkownika na mapie przechowuje szerokość i długość geograficzną kliknięcia w zmienne na kontrolerze

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

W widoku chcę wyświetlić te wartości

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

W kanciastym 1 po prostu zawijam przypisanie w kontrolerze w wywołaniu $ scope. $ Apply ().

Jaki jest preferowany sposób aktualizowania widoków w angluar 2.0?


14
2017-10-16 15:26


pochodzenie




Odpowiedzi:


W większości przypadków nie trzeba nic robić, aby zaktualizować widok. zone.js zrobi wszystko dla ciebie.

Ale jeśli z jakiegoś powodu chcesz ręcznie uruchomić wykrywanie zmiany ognia (na przykład, jeśli twój kod działa poza strefą kątową), możesz użyć LifeCycle::tick() metoda, aby to zrobić. Widzieć ten 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());
  }
}

14
2017-10-16 16:39



dzięki! Wygląda na to, że znajdowałem się poza strefą kątową (wewnątrz kliknięcia-oddzwaniania mapy google). Wywołanie lc.tick () dało podstęp :-) - Tobias Gassmann
Hmm może NgZone:run jest bardziej odpowiedni dla twojego przypadku użycia. Realizuje wywołanie zwrotne wewnątrz strefy kątowej, po wykonaniu uruchamia LifeCycle.tick (). - alexpods
Uprawiam z @alexpods. Jest inne pytanie, które rozwiązuje to w ten sposób, z NgZone:run (stackoverflow.com/questions/31352397/...) - EuAndreh
Inna metoda polega na użyciu ChangeDetectorRef lubię to: this.chRef.detectChanges(). - Helzgate
LifeCycle już nie istnieje: / - Blauhirn


Spróbuj zaimportować ChangeDetectorRef z kątowego rdzenia, jak następuje

import {Component, ChangeDetectorRef} from 'angular2/core';

w konstruktorze

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

39
2017-12-14 06:42



w nowych wersjach kątowych jest import {Component, ChangeDetectorRef} from '@angular/core'; - Luckylooke


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

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


2
2017-10-16 15:37



"małpa łata wszystkie rzeczy" ?! Pozwól mi "$ digest", że ... - Tobias Gassmann
to wydaje się być jedyną faktycznie działającą odpowiedzią - Blauhirn
pracował w Ionic 1, pracuje w Ionic 2/3. Nuff powiedział. - Chris Matthews