Der Versuch, die Fenstergröße bei der Fenstergrößenänderung durch einen Stream in einer eckigen 2-Komponente unter Verwendung von async pipe zu rendern:
<h2>Size: {{size$ | async | json}}</h2>
Aber die Komponente rendert nur den Anfangszustand und ignoriert die Stream-Aktualisierungen. Wenn Sie die Konsole öffnen, sehen Sie bei der Größenänderung des Fensters die Updates von demselben Stream.
Ich kann nicht verstehen, was ich hier vermisse.
Hier ist ein Plocker
Der Ereignishandler wird außerhalb der Angular-Zone ausgeführt, sodass die Angular Change-Erkennung nicht ausgeführt wird, wenn ein Ereignis ausgelöst wird. Setzen Sie den Event-Handler in Ihre Komponente und es wird dann zusammen mit allen anderen asynchronen Ereignissen affe-gepatcht. Die Angular Change-Erkennung wird also nach jedem Ereignis ausgeführt (und aktualisiert die Ansicht):
%Vor%Eine weitere Option, die in den Kommentaren erläutert wird, besteht darin, die Änderungserkennung manuell auszuführen , wenn ein Ansichtsmodell aktualisiert wird:
%Vor% Beachten Sie, dass Sie stattdessen versuchen möchten, ApplicationRef.tick() einmal auszuführen, z. B. in Ihrer Root-Komponente, die die Änderungserkennung für alle Komponenten ausführt, anstatt ChangeDetectorRef.detectChanges() in jeder Komponente auszuführen. (Und möglicherweise müssen Sie tick() in eine setTimeout() -Methode einfügen, um sicherzustellen, dass alle Komponentenansichtsmodelle aktualisiert wurden ... Ich bin nicht sicher, ob alle do() -Rückrufmethoden ausgeführt werden - dh wenn sie alle in einer Runde der JavaScript-VM ausgeführt werden oder wenn mehrere Abbiegungen beteiligt sind.)
Da mein Ziel darin bestand, die Fenstergrößenströme in einem anderen Modul zu abstrahieren, versiegelte anscheinend nur das Umschließen der Streams in einer Klasse das Geschäft:
"Dies ist die Zukunft" Version:
%Vor%"Oma" Version:
%Vor%Obwohl ich Klasse / Service in diesem Modul nicht wollte, nur klare / plattformunabhängige Konstrukte, war dies die einzige saubere Methode, die für eckig funktionierte, ohne sich um das Auslösen von Zonenupdates kümmern zu müssen.
Tags und Links angular rxjs rxjs5 angular2-changedetection