Jak wymusić ponowne renderowanie komponentu w Angular 2?

Tx, znalazłem obejście, którego potrzebowałem:

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

ChangeDetectorRef approach

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

}

Wymuszam przeładowanie komponentu za pomocą *ngIf.

Wszystkie komponenty w moim kontenerze wracają do haków pełnego cyklu życia .

W szablonie:

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

Następnie w pliku ts:

public _reload = true;

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

Inne odpowiedzi tutaj dostarczają rozwiązań dla wyzwalania cykli wykrywania zmian, które zaktualizują widok komponentu (co nie jest takie samo jak pełne ponowne renderowanie).

Pełne ponowne renderowanie, które zniszczyłoby i ponownie uruchomiłoby komponent (wywołanie wszystkich hooków cyklu życia i przebudowanie widoku) może być wykonane za pomocą ng-template, ng-container i ViewContainerRef w następujący sposób:

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

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

Następnie w komponencie mającym odniesienie zarówno do #outlet, jak i #content możemy wyczyścić zawartość i wstawić kolejną instancję potomka Składnik:

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

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

Dodatkowo zawartość początkową należy wstawić na AfterContentInit haku:

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

Pełne rozwiązanie robocze można znaleźć tutaj https://stackblitz.com/edit/angular-component-rerender .

ChangeDetectorRef.detectChanges() zwykle jest to najbardziej skoncentrowany sposób na zrobienie tego. ApplicationRef.tick() jest zwykle zbyt dużo podejścia do młota kowalskiego.

Aby użyć ChangeDetectorRef.detectChanges(), potrzebujesz tego na górze komponentu:

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

... wtedy zazwyczaj po wstrzyknięciu go do konstruktora wykonujesz tak:

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

Następnie, w odpowiednie miejsce, nazywacie to tak:

this.cdr.detectChanges();

gdzie zadzwonisz ChangeDetectorRef.detectChanges() może być bardzo istotne. Musisz całkowicie zrozum cykl życia i dokładnie jak Twoja aplikacja działa i renderuje swoje komponenty. Nie ma tu substytutu dla pełnego odrabiania lekcji i upewniania się, że rozumiesz kanciasty cykl życia na wylot. Następnie, gdy to zrozumiesz, możesz użyć ChangeDetectorRef.detectChanges() odpowiednio (czasami bardzo łatwo jest zrozumieć, gdzie powinieneś go użyć, innym razem może to być bardzo złożone).