Wie erzwinge ich die Neuberechnung einer Komponente in Angular 2?

Question

Wie erzwingt man die Neuberechnung einer Komponente in Angular 2? Für Debug-Zwecke mit Redux arbeiten möchte ich eine Komponente zwingen, seine Ansicht erneut zu rendern, ist das möglich?

Answer 1

Rendering geschieht nach Änderungserkennung. Um Änderungserkennung zu erzwingen, so dass Komponente Eigenschaftswerte, die auf das DOM weitergegeben wird geändert haben (und dann wird der Browser diese Änderungen in der Ansicht machen), hier sind einige Optionen:

• ApplicationRef.tick() - ähnlich wie Angular 1en $rootScope.$digest() - Überprüfen Sie den gesamten Komponentenbaum
• NgZone.run(callback) - ähnlich wie $rootScope.$apply(callback) - dh, evaluieren Sie die Callback-Funktion innerhalb der Angular 2-Zone. Ich denke, aber ich bin mir nicht sicher, dass das den gesamten Komponentenbaum nach dem Ausführen der Callback-Funktion überprüft.
• ChangeDetectorRef.detectChanges() - ähnlich wie $scope.$digest() - das heißt, überprüfen Sie diese Komponente nur und seine Kinder

Sie ApplicationRef injizieren können, NgZone oder ChangeDetectorRef in Ihrer Komponente.

Für Ihr spezielles Szenario würde ich die letzte Option empfehlen, wenn nur eine einzelne Komponente geändert wurde.

Answer 2

tx, fand die Abhilfe, die ich brauchte:

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

läuft zone.run wird die Komponente zwingen, erneut zu rendern