Wie Zwischenspeichern oder View-Status auf History in Angular beibehalten 2

Question

Ich benutze Winkel 2 mit der mit infinite scrolling und wenn ich ein Element aus der Liste auswählen, navigieren ich zu der Detailansicht, die eine: ID im URL-Pfad darstellt . Wenn ich zurück navigiere, wird die Listenansicht neu geladen und der Anfangszustand ist verloren.

Was ist der richtige Weg, um den Status der Ansicht beim Zurückfahren zu erhalten? Ist es möglich, die Ansicht so zu speichern, wie sie ist, bevor die Navigation stattfindet?

Answer 1

Dies ist theoretisch möglich, aber ich habe es noch nicht versucht.

Wenn Sie Ihre Detailansicht als untergeordnete Route oder Komponente platzieren, wird Ihre Listenansichtskomponente bei untergeordneter Route/Komponenteninitialisierung nicht zerstört. Dann könnten Sie die Elternkomponente ausblenden und zu Kind navigieren. Obwohl dies keine richtige Lösung ist, müssen Sie eine Möglichkeit finden, den Status der Listenansicht zu speichern.

Answer 2

Zunächst möchte ich sagen, dass ich glaube, dass Unterstützung für "View-State" ein Teil des Rahmens sein sollte. Und es kann sehr gut sein, aber ich konnte es noch nicht finden. Aber da ich jetzt eine Lösung brauche, habe ich beschlossen, meine eigene zu rollen. So funktioniert das.

Ich habe einen ViewStateService wie folgt erstellt. Beachten Sie, dass es sich bei dem ViewState für den Service um eine Karte mit Karten handelt. Jede Top-Level-Komponente, zu der navigiert werden kann, hat einen Top-Level-Map-Eintrag mit dem Komponentennamen als Schlüssel. Die Karte an dieser Taste wird verwendet, um zu den Unterkomponenten weiterzuleiten, um sowohl ihren gespeicherten Ansichtszustand als auch einen Ort zum Speichern ihres Ansichtsstatus beizubehalten.

@Injectable() 
export class ViewStateService { 
    viewState : Map<string, Map<string, string> > = new Map<string, Map<string, string> >(); 
    constructor(){ 
    } 

    setViewState(key : string , map : Map<string, string>){ 
    this.viewState.set(key, map); 
    } 

    getViewState(key : string) : Map<string, string>{ 
    return this.viewState.get(key); 
    } 
} 

Dann in Top-Level-Komponenten, dieser Service wird injiziert. Die oberste Ebene Komponente extrahiert dann seinen Ansichtszustand in ngOnInit() durch den Aufruf:

this.viewState = this.viewStateServices.getViewState("ComponentName"); 

Diese Karte wird als eine Eingabe an jeden Subkomponente (oder zumindest diejenigen, die Ansichtszustand speichern müssen) weitergegeben. Die Unterkomponenten implementieren alle OnInit und OnDestroy. In ngOnInit() rufen sie den gespeicherten Ansichtszustand ab - wenn er dort ist. Und in ngOnDestroy() speichern sie alle Viewstate, die sie wollen. Jede Unterkomponente übergibt den Ansichtszustand auch als Eingabe an Unterunterkomponenten (rekursiv). Auf diese Weise erhält jede Unterkomponente eine Chance zum Speichern und Wiederherstellen von Viewstate. Eine Sache, auf die Sie achten sollten, sind Komponenten, die versuchen, einen Wert mit demselben Namen zu speichern. Sie können dies abschwächen, indem Sie allen Feldern den Komponentennamen oder eine andere solche Konvention voranstellen.

Ich habe dies für meine Angular App getan und es scheint zufriedenstellend zu funktionieren. Ich denke jedoch, dass der Rahmen diesen Mechanismus wirklich bereitstellen sollte. Wenn und wenn es funktioniert (oder wenn ich herausfinde, wie es funktioniert), plane ich, es zu benutzen. Aber in der Zwischenzeit habe ich eine Lösung, die funktioniert.