2017-05-01 7 views
2

Ich bin mir sicher, dass es eine einfache, elegante Lösung für dieses Angular 4 Routing-Problem gibt. ich die folgenden Routen haben - das ist eine Master-Liste mit Kind Blick unter:Wie wechsle ich die Elternroute, halte aber Kinderrouten

/plan/:id/overview 
/plan/:id/details 
... many more about 10 different child views 

Wenn ich auf einen bestimmten Weg zu gehen, sagen: /plan/5 - das mir

Dann /plan/5/overview Standard I wechselte in die Detailansicht /plan/5/details, aber jetzt wählt einen anderen Plan /plan/6, wie halte ich sie auf /plan/6/details derzeit meine Regeln nur standardmäßig auf /plan/6/overview dies macht es uns schwer, verschiedene Pläne schnell zu vergleichen, wie es auf die erste untergeordnete Ansicht zurückgesetzt wird.

Meine aktuelle Route Link sieht wie folgt aus:

[routerLink]="['plan/' + plan.Id ]" *ngFor="let plan of plans | async;" 
+0

Wie werden Sie die Parameter aus dem Weg zu extrahieren? Verwenden Sie es als [beobachtbar] (https://angular.io/docs/ts/latest/guide/router.html#!#reuse)? Vielleicht hilft Ihnen das, den aktuellen Status Ihrer Elternkomponente zu überprüfen, um festzustellen, welches Kind angezeigt werden soll. – elvin

+0

So gehen Sie zu dieser Route verwenden Sie die Route ID für die Anforderung, oder Sie senden die Daten von der übergeordneten Komponente 'Plan' – Aravind

+0

@elvin Pläne ist eine beobachtbare, die auf der obersten Ebene' Pfad aufgelöst wird: : ID wird auf 'plan /: id' level aufgelöst und als Parameter verwendet. Ich nehme an der RouterLink könnte ich wahrscheinlich die aktuellen Kinder Routen nehmen und sie an die neue Route anschließen? Ist das die richtige Idee? –

Antwort

0

du so mit leeren Pfad umleiten.

let routes = [ 
    { 
    path: "plan/:id", 
    component: Plan, 

    children: [ 
     { 
     path: '', 
     pathMatch: 'full' 
     redirectTo: 'overview' 
     }, 
     { 
     path: "overview", 
     component: Overview 
     } 
    ] 
    } 
]; 

hier ist voll https://plnkr.co/edit/1xQcOyuEnTukBxCJtwzG

+0

Hallo - danke - ich habe diese Weiterleitung schon - ich denke mehr darüber nach, wie ich "nicht" umleiten kann, wenn ich zu einem anderen Plan /: id gehen und die bestehende Kinderroute "Detail" behalten möchte. '[routerLink] =" ['plan /' + plan.Id + VORHANDENE-KIND] "' –

+0

es wird sehr irreführende Elternteil von neuen und Überblick von alten. Vielleicht brauchst du keine Eltern-Kind-Beziehung, sondern nur Geschwister. wie [{pfad: "plan /: id", komponente: Plan}, {pfad: "plan /: id/übersicht", komponente: Übersicht} –

Verwandte Themen