Angular 2 - Übergabe von Daten zwischen Routen

Question

Ich habe 2 Routen in meiner Anwendung -/Such/Kriterien und/Suche/Ergebnisse.

In der Suchkriterien Komponente, Benutzer füllt die Suchkriterien ein und klickt auf die Suchtaste. Diese Schaltfläche ruft eine Funktion (onSearch) auf und die Formularwerte werden als Eingabe übergeben. Es leitet dann den Benutzer zur Suchergebniskomponente.

onSearch(formValues) { 
console.log(formValues); 
this.router.navigate(['/search/results']); 
} 

Wie kann ich die formValues ​​(Javascript-Objekt, das vom Benutzer eingegebenen Suchkriterien enthält) übergeben, um die Suchergebnisse Komponente? In der Suchergebniskomponente würde ich die Suche (unter Verwendung des Dienstes) ausführen und die Ergebnisse dem Benutzer in einem Raster anzeigen.

Da die Suche Ausführung in einem Dienst gemacht wird, ich könnte diesen Service auch von der onSearch Methode aufrufen. Aber dann wäre die Frage, wie die Ergebnisse an die Suchergebniskomponente übergeben werden (damit sie in einem Raster dargestellt werden können).

Was wäre ein besserer Ansatz?

Answer 1

Ich würde vorschlagen, so etwas wie ein DataStorageService schaffen, in dem Sie die Daten speichern, die Sie in Suchkriterien Komponente benötigen und extrahieren nur die Daten aus der Service, wo Sie es brauchen.

Ihr Service könnte so etwas wie dies zum Beispiel aussehen:

import { Injectable } from "@angular/core"; 

@Injectable() 
export class DataStorageService { 
    public storage: any; 

    get isEmpty(): boolean { 
     return this.storage === null || this.storage === undefined; 
    } 

    constructor() {} 
} 

Natürlich ist dies ein einfaches Beispiel ist, und Sie müssen entscheiden, wie Sie wollen, speichern Sie Ihre Daten in den Dienst wirklich.

Answer 2

Da Ihre Daten ein Objekt ist, können Sie local oder einen Shared-Service verwenden, um sie zu übertragen.

Sie können eine Vorstellung davon bekommen, wie man von hier einen gemeinsamen Dienst nutzen: https://stackoverflow.com/a/35479148/6835976