Angular2 passieren Daten zu Route von Komponente

Question

Ich muss die Daten, um von einer Komponente zur anderen, fand ich nur die Möglichkeit, es mit Routenparameter in URL zu tun:

Also habe ich eine solche Konfiguration für die Zielkomponente in Router:

{ 
    path: 'edit-tags/:type/:name/:id', 
    component: EditTagsComponent, 
}, 

und ich verwende es so, dass von einer anderen Komponente:

this.router.navigate([`../edit-tags/${product.type}/${product.name}/${product.id}`], { relativeTo: this.route }); 

es funktioniert ok, aber ich will nicht id in uRL zeigen und auch som passieren müssen e mehr Daten zur Komponente.

Auch habe ich mit Konfigurationen wie die in Router gesehen:

{ path: 'test-product', component: ProductsContentComponent, data: { role: 'admin', type: 'test-product' } } 

Aber ich habe nicht ein Beispiel mit dem gleichen Ansatz innerhalb einer anderen Komponente gefunden.

Gibt es also eine Möglichkeit, einige Daten von Komponente zu Komponente auf Routing zu übergeben, ohne es in URL widerzuspiegeln?

Answer 1

Wir brauchten die gleiche Lösung für unsere Web-App und haben den Ansatz der Datenübergabe von einer Komponente zur anderen über einen Service verfolgt. Auf diese Weise werden sensible Daten nicht in der URL ausgedrückt. Hier ist unsere erste Komponente, die eine Liste von Daten zeigt. Die Hauptmethode, auf die wir uns konzentrieren, ist die Methode changeRoute. Vor dem Routenwechsel speichern wir die aktuell ausgewählten Daten im dataService und führen dann eine Routenänderung durch.

import { Component, OnInit } from "@angular/core"; 
import { Router } from "@angular/router"; 

import { DataService } from "./data.service"; 
import { Data } from "../../models/data.model"; 

@Component({ 
selector: "ei-data-list", 
template: require("./data-list.component.html") 
}) 
export class DataListComponent implements OnInit { 
    constructor(private dataService: DataService, private router: Router) {} 

    // .... code for properties and getting data here 

    changeRoute(data: Data) { 
     this.dataService.data = data; 
     this.router.navigate(["/data-list/data-item"]); 
    } 
} 

Hier ist der Datendienst, den wir gebaut haben. Für dieses Beispiel haben wir es etwas reduziert.

import { Injectable } from "@angular/core"; 
import { Data } from "../../models/data.model"; 

@Injectable() 
export class DataService { 
    constructor() { } 

    public data: Data; 
} 

Endlich haben wir unsere zweite Komponente, die wir die Daten übergeben. Innerhalb von ngOnInit sammeln wir die Daten so, dass sie fertig sind, wenn die Seite geladen wird. Ich hoffe das hilft.

import { Component } from "@angular/core"; 
import { DataService } from "./data.service"; 

@Component({ 
    selector: "ei-data-item", 
    template: require("./data.component.html") 
}) 
export class DataComponent { 
    constructor(private dataService: DataService) {} 
    data: Data; 

    ngOnInit() { 
     this.data = this.dataService.data; 
    } 
} 

Answer 2

Ein anderer Weg, dies zu tun ist mit einem Betreff und ein Abonnement von einem gemeinsamen Service zwischen den beiden Komponenten. Ich mache dies die ganze Zeit für Suchbegriffe, die dem beschriebenen Muster here folgen.

In Ihrem Service, würde Sie so etwas wie:

export class MyService { 
    private searchStringSubject = new Subject<string>(); 

    searchAnnounced$ = this.searchStringSubject.asObservable(); 

    announceSearch(searchValue: string) { 
     this.searchStringSubject.next(searchValue); 
    } 
... 
} 

Und in Ihrem Stammkomponente das Ereignis die Daten fahren:

public onSelectSearchValue(e: TypeaheadMatch): void { 
    this.chipService.announceSearch(e.item.id); 
} 

Und in Ihrem Kind Komponente, haben sie abonnieren zu den Daten:

Exportklasse ChildComponent implementiert OnInit { Abonnement: Abonnement; ID: Zeichenfolge;

constructor(private _service: MyService) { 
    this.subscription = _service.searchAnnounced$.subscribe(
     id => { 
      this.id = id; 
      this.query(); 
     }); 

}