2017-01-12 3 views
2

habe ich versucht, ein paar Ansätze Brotkrümel und sie scheinen aus der Box, da die meisten meiner Routen nutzlos nicht genügend Informationen enthalten.Routing und Paniermehl in Angular2

zum Beispiel:

/products 
/product:id 
/subproudcts:productId 
/subproductdetail:subproductId 

Jeder dieser Wege ist ein tieferes Eintauchen in den Katalog. SubProduct: 500 ist ein Kind des Produktes: 27 usw.

ich Paniermehl möchte wie folgt aussehen:

Mein Produkt A>Subprodukten>Sub Produktbeschreibung B

standardmäßig über Pfade enthalten nicht genügend Informationen für Brotkrumen-Komponente auf diese magische Weise herauszufinden.

Eine Lösung, die ich dachte, macht Routen mehr wie folgt aus:

/products/detail:id/subproducts 
/products/detail:id/subproducts/detail:id 

nicht sicher, ob dies ist, was Paniermehl Komponenten suchen, wenn es die „richtige“ Weg zu gehen.

meine Frage ist: Was ist eine gute Lösung, die eine schöne Brauch Brotkrümel zu haben, dass kann 1. zeigt alle Pfade mit Link auf Teillisten und 2. zeigt die Namen des einzelnen ausgewählten Elternteil.

+0

die Unterproduktaddierer Informationen aus Ihrem Backend Get. Stellen Sie sicher, dass das Back-End die ID und den Namen des übergeordneten Produkts zusammen mit den übrigen Unterproduktinformationen zurückgibt. Zeigen Sie diese Informationen als Breadcrumb an. Koppeln der Brotkrumen mit Routing ist wahrscheinlich keine gute Idee. –

+0

hey JB, sicher, aber das klingt wie das Erstellen eines benutzerdefinierten Steuerelements, das eine API-Methode mit EntityType und ID aufruft und Bruchteile von einem zurückgegebenen Array von Links rendert. Das würde alle Routeninformationen umgehen, oder? Ich bin gespannt, was gut bestehenden Paniermehl basierend auf Routen sind wenn überhaupt .. oder wenn etwas anderes existiert, dass ich das anstelle des Schreibens von Grund auf neu nutzen könnte –

+0

Eigentlich vielleicht sogar richtige Routen würden Ihnen helfen. Sie können ngOnInit in der Komponente hinzufügen und dann URL einfach analysieren. Dies wäre wahrscheinlich bessere Lösung –

Antwort

0

Ich würde es über Dienst tun

import { Observable } from 'rxjs/Observable'; 
import { BehaviorSubject } from "rxjs" 

class UrlWithNameAndOtherMeta { 
    url: number; 
    name: string; 
    getUrl() { 
     return "<a href=" + this.url + ">" + name + "</a>" 
    } 
} 

class BreadcrumbService { 
    breadcrumbEmiter = new BehaviorSubject<UrlWithNameAndOtherMeta[]>([]); 
    listOfItems = []; 
    push(page: UrlWithNameAndOtherMeta) { 
     this.listOfItems.push(page); 
     this.breadcrumbEmiter.next(this.listOfItems); 
    } 
    pop() { 
     this.listOfItems.pop(); 
     this.breadcrumbEmiter.next(this.listOfItems); 
    } 
    get breadcrumbAsObservable() : Observable<UrlWithNameAndOtherMeta[]>{ 
     return this.breadcrumbEmiter.asObservable(); 
    } 
} 

Dann in Ihrem Brotkrümel Komponente, die Sie für breadcrumbAsObservable abonnieren. Danach drücken Sie Pop von Seiten.

PS. Aber ehrlich gesagt bin ich nicht sicher, ob ich nicht Rad neu zu erfinden :)

+0

hmm .. woher kennt das die aktuelle Route? –

+0

@SonicSoul Nein, Sie müssten Push-Logik schreiben, wenn der Benutzer die Seite wechselt. Aber es hat immer noch Nachteile, denn wenn Sie die Seite aktualisieren, sind Sie in Schwierigkeiten. –

+0

yeah .. ich könnte etwas von Grund auf neu schreiben, die aktuellen Pfad analysiert und ruft Server, um die Brotkrume zu bekommen, aber scheint, als würde ich das Rad neu erfinden .. –