¿Cómo forzar la repetición de un componente en Angular 2?

¿Cómo forzar la repetición de un componente en Angular 2? Para fines de depuración trabajar con Redux me gustaría forzar a un componente a volver a renderizar su vista, ¿es posible?

La representación ocurre después de la detección de cambios. Para forzar la detección de cambios, de modo que los valores de las propiedades de los componentes que se hayan cambiado se propaguen al DOM (y luego el navegador representará esos cambios en la vista), estas son algunas opciones:

  • ApplicationRef.tick () : similar a $rootScope.$digest() Angular 1, es decir, compruebe el árbol de componentes completo
  • NgZone.run (callback) : similar a $rootScope.$apply(callback) , es decir, evaluar la función de callback dentro de la zona angular 2. Creo, pero no estoy seguro, que esto termine revisando el árbol de componentes completo después de ejecutar la función de callback.
  • ChangeDetectorRef.detectChanges () – similar a $scope.$digest() – es decir, verifique solo este componente y sus hijos

Tendrá que importar e inyectar ApplicationRef , NgZone o ChangeDetectorRef en su componente.

Para su escenario particular, recomendaría la última opción si solo un componente ha cambiado.

tx, encontré la solución alternativa que necesitaba:

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

ejecutar zone.run forzará al componente a volver a renderizarse

Enfoque ChangeDetectorRef

 import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; constructor(private cdr: ChangeDetectorRef) { } selected(item: any) { if (item == 'Department') this.isDepartment = true; else this.isDepartment = false; this.cdr.detectChanges(); }