web-dev-qa-db-fra.com

angular 2.0 équivalent à $ scope. $ apply

J'essaie de commencer avec angular 2.0, maintenant je me demandais comment je peux lancer une mise à jour de la vue après qu'un événement externe ait changé les données.

Dans les détails, j'ai une carte Google et un gestionnaire pour un événement de clic sur la carte. Après que l'utilisateur a cliqué sur la carte, je stocke la latitude et la longitude du clic dans des variables sur le contrôleur

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

Dans la vue, je veux afficher ces valeurs

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

Dans angular 1, je voudrais simplement envelopper l'affectation dans le contrôleur dans un appel à $ scope. $ Apply ().

Quelle est la meilleure façon de mettre à jour les vues dans angluar 2.0?

javascriptangularjsangular
22
Tobias Gassmann

Généralement, vous n'avez rien à faire pour mettre à jour la vue. zone.js fera tout pour vous.

Mais si, pour une raison quelconque, vous souhaitez déclencher la détection des modifications manuellement (par exemple, si votre code s'exécute en dehors d'une zone angular), vous pouvez utiliser LifeCycle::tick() méthode pour le faire. Voir ce plongeur

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

Essayez d'importer ChangeDetectorRef de angular comme suit

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

en constructeur

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

réf: http://blog.mgechev.com/2015/04/06/angular2-first-impressions/

2
Aishwat Singh