Come forzare il re-rendering di un componente in Angular 2?

Question

Come forzare il re-rendering di un componente in Angular 2? Per scopi di debug che funzionano con Redux vorrei forzare un componente a ri-renderizzare la sua vista, è possibile?

Answer 1

rendering avviene dopo il rilevamento cambiamento. Per forzare il rilevamento delle modifiche, in modo che i valori delle proprietà dei componenti che sono stati modificati ottenere propagate al DOM (e quindi il browser renderanno tali modifiche nella vista), qui ci sono alcune opzioni:

• ApplicationRef.tick() - simile a angolare 1 di $rootScope.$digest() - Vale a dire, controlla l'albero dei componenti completo
• NgZone.run(callback) - simile a $rootScope.$apply(callback) - ad esempio, valuta la funzione di richiamata all'interno della zona Angolare 2. Penso, ma non sono sicuro, che questo finisca per controllare l'albero dei componenti completo dopo aver eseguito la funzione di callback.
• ChangeDetectorRef.detectChanges() - simile a $scope.$digest() - vale a dire, controllare solo questo componente e dei suoi figli

È possibile iniettare ApplicationRef, NgZone, o ChangeDetectorRef nel componente.

Per il tuo scenario particolare, consiglierei l'ultima opzione se solo un singolo componente è cambiato.

Answer 2

tx, trovato la soluzione che serviva:

constructor(private zone:NgZone) { 
    // enable to for time travel 
    this.appStore.subscribe((state) => { 
     this.zone.run(() => { 
      console.log('enabled time travel'); 
     }); 
    }); 

zone.run esecuzione forzerà il componente di ri-rendering