Zwischenspeichern von Komponentendaten in Angular 2 App

Question

Ich verwende Observables, um Daten in meine Angular 2-App zu laden, und versuche nun herauszufinden, wie die letzte zwischengespeicherte Version der Komponente (im lokalen Speicher) verwendet wird, wenn a Der Benutzer klickt auf eine neue Registerkarte (verlässt die Komponente) und triggert erneut die Öffnung der Komponente (gibt zurück) - sie erhalten den letzten Zustand der Komponente.

Dies ist in diesem Fall besonders wichtig, da auf der Seite Filter vorhanden sind, die die Daten entsprechend der Benutzerauswahl filtern. Wenn sie also zu der Komponente zurückkehren, möchte ich, dass diese Filter immer noch auf die Daten angewendet werden.

Dies ist der Aufruf, der aus einer Komponente besteht, wo ich mit kantigem der OnInit Lebenszyklus Haken auf die beobachtbaren abonnieren:

ngOnInit() { 
    this.filtersService.getByFilter(this.page, this.pagesize, { 
      'services.workflow.status' : 'consulting' 
      }) 
      .subscribe(resRecordsData => { 
       this.records = resRecordsData; 
      }, 
      responseRecordsError => this.errorMsg = responseRecordsError); 

} 

Und dies ist der beobachtbare API aus dem Service-Aufruf:

getByFilter(page, pagesize, body) { 
    const headers = new Headers({ 'Content-Type': 'application/json' }); 
    const options = new RequestOptions({ headers: this.headers }); 
    return this.http.post 
    (`${this.url}${this.ver}/customers/search?apikey=${this.key}&page=${page}&pagesize=${pagesize}`, 
    body, options) 
     .map((res: Response) => res.json()) 
     .catch(this.filterErrorHandler); 
} 
    filterErrorHandler(error: Response) { 
    console.error(error); 
    return Observable.throw(error.json().error || 'Server error').share(); 
} 

Ich bin nicht auf eine solche Caching-Situation für Angular 2 gelaufen. Wäre es so einfach wie wenn ich überprüfe, ob der lokale Speicher relevante Daten enthält? Oder gibt es einen Angular-spezifischen Mechanismus, mit dem ich die Komponente nur unter bestimmten Bedingungen neu laden kann (wenn sich die Daten seit dem letzten Öffnen der Komponente geändert haben)?

Answer 1

Es gibt mehrere Möglichkeiten:

1) Verwenden Sie einen Dienst. Ich habe hier ein einfaches Beispiel: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

2) Routing-Parameter. Sie können erforderliche, optionale oder Abfrageparameter angeben. Weitere Informationen finden Sie unter: Sending data with route.navigate in Angular 2

3) In Ihrem Fall gibt es eine weitere Option, die es hinzufügen/aus dem lokalen Speicher wieder abrufen soll. Aber die obigen zwei Optionen können besser funktionieren.