2015-11-11 24 views
15

Ich versuche, einen Fenstermanager mit Angular 2 zu bauen. Grundsätzlich möchte ich zwischen Fenstern wechseln können (das sind Komponenten in einem Router-Steckdose injiziert) ohne ihre zu verlieren Zustände. Ich bearbeite zum Beispiel ein Produktinformationsformular, wenn ich zu einer Kundenliste wechsel, dann komme ich zurück zum Produktformular und finde es im gleichen Zustand ... Ist das möglich?Angular 2: Tauschen zwischen verschiedenen Komponenten, ohne sie zu zerstören

+0

Mit anderen Worten, gibt es eine Möglichkeit zu verhindern, dass die Komponenten zerstört werden, wenn wir zu einer anderen Komponente navigieren? – cangosta

Antwort

5

So habe ich diese Anforderung übertroffen.

Sobald sich die Route ändert, werden die Windows-Komponenten zerstört. Um also den Status zwischen diesen Windows-Instanzen zu speichern, musste ich ihn manuell in einen injizierten Service speichern.

Um den Status für jede Fensterkomponente zu speichern und zu laden, habe ich die Lebenszyklus-Hooks verwendet, die vom Router bereitgestellt werden: onActivate (next, prev) und onDeactivate (next, prev).

EDIT

Inzwischen habe ich ein issue on Angular 2 github repo anfordernden diese Funktion geöffnet.

+0

wie hast du das gespeichert Zustand ? mit 'Fenster' Objekt? Ich kann es nicht funktionieren lassen. –

+0

Ich habe den Zustand in einem Service gespeichert, der in meine Ansichten – cangosta

+1

injiziert wird Ich verstehe den 'Service' Teil, aber was hast du genau gespeichert. Ich habe mit 'Klasseninstanz' und' Fenster'-Objekt versagt, was soll ich noch speichern? –

5

Kasse canReuse auf dem Router: canReuse in angular2 api docs

Wenn Sie den Router festlegen, der nicht Ihre Komponente zerstören, wenn sie von dem Einschalten entfernt.

+0

Hallo Dennis, du hast Recht ... Mit Blick auf die Dokumentation hast du absolut recht! Aber wenn Sie in die Implementierung Details tauchen (https://github.com/angular/angular/blob/b0009f03d510370d9782cf76197f95bb40d16c6a/modules/angular2/src/router/router_outlet.ts), finden Sie dies: "Wenn das neue Kind component hat einen anderen Typ als die vorhandene untergeordnete Komponente. Dies wird in 'false' aufgelöst. Sie können eine alte Komponente nicht wiederverwenden, wenn die neue Komponente einen anderen Typ hat." Entsprechend ihrem Code wird der Wiederverwendungs-Hook nur ausgelöst, wenn wir zu und von einer Komponente desselben Typs navigieren. – cangosta

+0

hmmm. Ich müsste das in der Praxis sehen, um es zu verstehen. Die Art, wie ich es gelesen habe, war, wenn Sie etwas bei einer Komponente registriert haben, dass Sie den Typ später nicht ändern konnten. ['Cars'] geht immer zu CarsCmp, wenn es wiederverwendet wird. –

+0

Ich habe es ein bisschen mehr geschaut und es scheint, dass Sie mit dieser Einschränkung recht haben. Ich bin mir nicht sicher, ob das stimmt, ohne es zu testen, aber es sieht so aus, als könnten Sie nicht zwei verschiedene Komponententypen auf derselben Route verwenden. Scheint wie eine große Sache, nicht zu erwähnen. –

Verwandte Themen