Wie wird eine bestimmte Komponentenvorlage von einer anderen Komponente erneut gerendert? Angular 2

Question

Ich versuche, eine eckige 2 html-Vorlage neu zu rendern, so weit nach der Recherche habe ich festgestellt, dass ich NgZone verwenden muss. Also, was ich tue, in meiner Hauptkomponente nenne ich Navigationsleiste Komponente, die Benutzerdetails Komponente aufruft.

In der Benutzerdetails Komponente zeigt die Benutzerdetails aka Name und Zeug. Ich habe eine andere Komponente, die den Namen des Benutzers ändert. Wenn ich den Namen ändere, ändert sich der Name in der Navigationsleiste (Benutzerdetails) nicht.

Also versuche ich auf diese Weise in meiner Änderungsdetailkomponente eine usdetailsdetails-Komponente zu initialisieren und eine Methode aufzurufen, die eine ngZone initialisiert und die .run() -Methode aufruft, wo ich den curretName mit dem neuen Namen aktualisiere ... und Einloggen in der Konsole.

SO wenn ich den Namen direkt nach dem HTTP-Ende aktualisieren, erhalte ich in der Konsole den neuen Namen, aber auf der Navigationsleiste ist der Name immer noch derselbe.

Bis jetzt ist die einzige Lösung Fenster-Reload ... aber das ist nicht benutzerfreundlich, da der Benutzer nicht weiß, was mit den Änderungen passiert ist.

Also ich überspringe etwas aber was?

Vielen Dank im Voraus!

Answer 1

Ich denke, dass der Versuch, Ihre Komponente wiederzugeben, nicht der richtige Weg ist, um Ihr Problem zu lösen. Sie können es auf zwei verschiedene Arten lösen:

• einen Getter/Setter-Dienstes, der eine Observable zurück, so dass Sie subscribe es und erhalten Sie die Änderungen, die Sie wünschen. Sie würden dies auf Ihrer Benutzer-Details-Komponente subskribieren und einfach einen neuen Wert setzen, indem Sie den Setter mit Ihrer Navigationskomponente verwenden. Sie können mehr auf this article on Scotch.io by Jecelyn Yeen lesen.

• Mit redux, so, für Winkel ngrx/store oder ngrx/platform auf der Grundlage Ihrer abgewinkelte Ausführung. Mit redux können Sie subscribe zu einem observable von Ihrer Komponente versenden, neue Ereignisse versenden und mehr. Es ist ziemlich einfach zu implementieren, was Sie brauchen. Schau dir redux und die Demos an, die ich oben verlinkt habe. Ich schlage vor, Sie zu beobachten this brillante Rede von Lukas Ruebbelke auf youtube und schauen Sie sich seine Demo zur Verfügung here.

Mit beiden Ansätzen Zweiweg-Datenbindung wird die Arbeit tun, so, jedes Mal, wenn Sie Ihre Komponente Variablen gehen zu aktualisieren finden Sie frische Daten auf Ihrer Ansicht.