Como forçar a re-renderização de um componente no Angular 2?

Como forçar a re-renderização de um componente no Angular 2? Para propósitos de depuração trabalhando com o Redux, eu gostaria de forçar um componente a renderizar novamente sua visualização, isso é possível?

A renderização acontece após a detecção de alterações. Para forçar a detecção de alterações, para que os valores das propriedades dos componentes que foram alterados sejam propagados para o DOM (e o navegador renderize essas alterações na exibição), aqui estão algumas opções:

• ApplicationRef.tick () - semelhante ao 1 angular $rootScope.$digest()- ou seja, verifique a árvore de componentes completa
• NgZone.run (retorno de chamada) - semelhante a $rootScope.$apply(callback)- ou seja, avalie a função de retorno de chamada dentro da zona Angular 2. Eu acho, mas não tenho certeza, que isso acaba verificando a árvore de componentes completa após a execução da função de retorno de chamada.
• ChangeDetectorRef.detectChanges () - semelhante a $scope.$digest()- ou seja, verifique apenas este componente e seus filhos

Você precisará importar e injetar ApplicationRef , NgZoneou ChangeDetectorRefem seu componente.

Para o seu cenário específico, eu recomendaria a última opção se apenas um único componente tiver sido alterado.

tx, encontrei a solução que eu precisava:

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

executar zone.run forçará o componente a renderizar novamente

Abordagem 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();
    }

}

Eu forço a recarregar meu componente usando * ngIf.

Todos os componentes dentro do meu contêiner retornam aos ganchos do ciclo de vida completo.

No modelo:

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

Então no arquivo ts:

public _reload = true;

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

Outras respostas aqui fornecem soluções para acionar ciclos de detecção de alterações que atualizarão a exibição do componente (que não é a mesma que re-renderização completa).

Completa re-render, o que destruiria e reinicializar componente (chamando todos os ganchos de ciclo de vida e reconstruir vista) pode ser feito usando ng-template, ng-containere ViewContainerRefna seguinte forma:

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

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

Em seguida, no componente com referência a ambos #outlete #contentpodemos limpar o conteúdo dos pontos de venda e inserir outra instância do componente filho:

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

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

Além disso, o conteúdo inicial deve ser inserido no AfterContentInitgancho:

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

Solução de trabalho completa pode ser encontrada aqui https://stackblitz.com/edit/angular-component-rerender .

ChangeDetectorRef.detectChanges() geralmente é a maneira mais focada de fazer isso. ApplicationRef.tick()geralmente é uma abordagem excessiva da marreta.

Para usar ChangeDetectorRef.detectChanges(), você precisará disso na parte superior do seu componente:

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

... então, geralmente você alias que quando você injeta em seu construtor como este:

constructor( private cdr: ChangeDetectorRef ) { ... }

Então, no local apropriado , você chama assim:

this.cdr.detectChanges();

Onde você liga ChangeDetectorRef.detectChanges()pode ser altamente significativo. Você precisa entender completamente o ciclo de vida e exatamente como seu aplicativo está funcionando e processando seus componentes. Não há substituto aqui para fazer completamente sua lição de casa e garantir que você entenda o ciclo de vida angular de dentro para fora. Então, depois de entender isso, você pode usá-lo ChangeDetectorRef.detectChanges()adequadamente (às vezes é muito fácil entender onde você deve usá-lo, outras vezes pode ser muito complexo).