Wie erzwinge ich das Rendern einer Komponente in Angular 2?

Wie die Kraft eine Komponente re-rendering im Winkel 2?
Für debug-Zwecke die Arbeit mit Redux möchte ich die Kraft eine Komponente neu Rendern, ist es Ansicht, ist das möglich?

InformationsquelleAutor der Frage born2net | 2016-01-30

  1. 151

    Rendering geschieht nach (change detection). Um zu erzwingen, change detection, so dass die Komponente die Eigenschaft Werte, die geändert haben, Holen Sie sich vermehrt auf den DOM (und dann der browser rendert diese änderungen in der Ansicht), hier sind einige Möglichkeiten:

    • ApplicationRef.tick() - ähnlich Eckig 1 $rootScope.$digest() -- d.h., überprüfen Sie die gesamte Komponente Baum
    • NgZone.ausgeführt(callback) - ähnlich $rootScope.$apply(callback) -- d.h., bewerten die callback-Funktion in den Winkel-2-zone. Ich denke, aber ich bin nicht sicher, dass dies endet mit der überprüfung der vollständigen Komponente Baum nach der Ausführung der callback-Funktion.
    • ChangeDetectorRef.detectChanges() - ähnlich $scope.$digest() -- d.h., überprüfen Sie nur diese Komponente und Ihre Kinder

    Können Sie injizieren ApplicationRefNgZone oder ChangeDetectorRef in Ihre Komponenten.

    Für Ihr spezielles Szenario ist, würde ich empfehlen, die Letzte option, wenn nur eine einzige Komponente hat sich geändert.

    InformationsquelleAutor der Antwort Mark Rajcok

  2. 34

    tx, fand den workaround, den ich brauchte:

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

    running-zone.ausgeführt wird erzwungen, dass die Komponente neu Rendern

    InformationsquelleAutor der Antwort born2net

  3. 1

    ChangeDetectorRef Ansatz

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

    InformationsquelleAutor der Antwort Feng Zhang

Schreibe einen Kommentar