parametros - pasar datos de un componente a otro angular 2

¿Cómo forzar la re-representación de un componente en Angular 2?

Question

¿Cómo forzar la re-representación de un componente en Angular 2? Para fines de depuración que trabajen con Redux, me gustaría obligar a un componente a volver a representar su vista, ¿es eso posible?

Answer 1

El renderizado 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 han cambiado se propaguen al DOM (y luego el navegador mostrará esos cambios en la vista), estas son algunas opciones:

• ApplicationRef.tick() - similar al $rootScope.$digest() Angular 1. $rootScope.$digest() - es decir, verifique el árbol de componentes completo
• NgZone.run(callback) : similar a $rootScope.$apply(callback) , es decir, evalúa la función de devolución de llamada dentro de la zona Angular 2. Creo, pero no estoy seguro, que esto termina comprobando el árbol de componentes completo después de ejecutar la función de devolución de llamada.
• ChangeDetectorRef.detectChanges() - similar a $scope.$digest() - es decir, verifique solo este componente y sus elementos secundarios

Deberá importar y luego inyectar ApplicationRef , NgZone o ChangeDetectorRef en su componente.

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

Answer 2

Enfoque ChangeDetectorRef

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

export class MyComponent {

    constructor(private cdr: ChangeDetectorRef) { }

    selected(item: any) {
        if (item == ''Department'')
            this.isDepartment = true;
        else
            this.isDepartment = false;
        this.cdr.detectChanges();
    }

}

Answer 3

Obligo a recargar mi componente usando * ngIf.

Todos los componentes dentro de mi contenedor vuelven a los ganchos de ciclo de vida completo.

En la plantilla:

<ng-container *ngIf="_reload">
    components here 
</ng-container>

Luego en el archivo ts:

public _reload = true;

private reload() {
    setTimeout(() => this._reload = false);
    setTimeout(() => this._reload = true);
}

Answer 4

Otras respuestas aquí proporcionan soluciones para desencadenar ciclos de detección de cambios que actualizarán la vista del componente (que no es lo mismo que el renderizado completo).

El renderizado completo, que destruiría y reinicializaría el componente (llamando a todos los ganchos del ciclo de vida y la vista de reconstrucción) se puede hacer usando ng-template , ng-container y ViewContainerRef de la siguiente manera:

<div>
  <ng-container #outlet >
  </ng-container>
</div>

<ng-template #content>
  <child></child>
</ng-template>

Luego, en el componente que hace referencia tanto a #outlet como a #content , podemos borrar el contenido de los puntos de venta e insertar otra instancia del componente secundario:

@ViewChild("outlet", {read: ViewContainerRef}) outletRef: ViewContainerRef;
@ViewChild("content", {read: TemplateRef}) contentRef: TemplateRef<any>;

private rerender() {
    this.outletRef.clear();
    this.outletRef.createEmbeddedView(this.contentRef);
}

Además, el contenido inicial debe insertarse en el gancho AfterContentInit :

ngAfterContentInit() {
    this.outletRef.createEmbeddedView(this.contentRef);
}

La solución de trabajo completa se puede encontrar aquí https://stackblitz.com/edit/angular-component-rerender .

Answer 5

tx, encontré la solución 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 renderizar