Rendern einer untergeordneten Route im übergeordneten Element in Angular 4

Question

Mit Angular 2 kann eine untergeordnete Route "über" dem übergeordneten Element gerendert werden, indem eine leere path definiert und eine im Wesentlichen leere Basiskomponente erstellt wird. Ich versuche etwas Ähnliches mit dem neuen Angular Router (Version 4.3.1) zu erreichen, habe aber einen Roadblock getroffen.

Zu meinem Problem, here's a Plunker. Die Routen sind definiert zu reproduzieren:

[{ 
    path: '', 
    redirectTo: "/master", 
    pathMatch: "full" 
}, { 
    path: 'master', 
    component: MasterComponent, 
    children: [{ 
     path: 'detail/:value', 
     component: DetailComponent, 
     children: [{ 
      path: 'subdetail', 
      component: SubDetailComponent 
     }] 
    }] 
}] 

Wenn ich auf eine Detailseite navigieren, die Masterseite noch sichtbar ist, weil ich ein <router-outlet></router-outlet>-MasterComponent hinzugefügt haben. Was ich brauche, ist die Masteransicht durch das Detail zu ersetzen. Ich kann dies erreichen, indem detail/:value ein Geschwister von master eher als ein Kind, aber das ist nicht logisch richtig in meiner Anwendung und bricht meine Brotkrümel.

Gibt es einen geeigneten Weg, um diese Art von Muster zu behandeln, oder muss ich einen Workaround wählen, wie showing and hiding the intended route oder manually specifying a dedicated "main" outlet for every link?

Die einzige existierende Lösung, die sich nähert, ist define a dummy parent component, aber dies funktioniert nur einstufig. Wenn meine Detailseite eine andere Unter-Detailseite hat, die auch den Master ersetzen soll, wird es sehr unordentlich.

Gibt es eine Route-Level-Flag, die ich festlegen oder entwerfen kann, um dies elegant zu implementieren? Ich bin ein Angular 2 Anfänger, aber ich habe das Gefühl, dass so etwas einfach sein sollte.

Answer 1

Zuerst gibt es keinen "neuen" Router in 4.3.1. Es ist der gleiche Router von 2.x.

Zweitens gab es ein paar Änderungen, die ich machen musste, um es richtig zu machen. Die Schlüsseländerung war dies in der master.component.ts:

<a [routerLink]="['/detail', 5]"> 

Ich fügte einen Schrägstrich hinzu. Ohne den Schrägstrich suchte es nach einer Route mit dem Namen master/detail/5

Die Route Definition ist jetzt flach, so wird alles "unter" Ihre Hauptkopfzeile angezeigt.

export const routes: Routes = [ 
    { 
    path: '', 
    redirectTo: 'master', 
    pathMatch: 'full' 
    }, 
    { 
    path: 'master', 
    component: MasterComponent 
    }, 
    { 
    path: 'detail/:value', 
    component: DetailComponent 
    } 
]; 

Die aktualisierte Plunker hier: https://plnkr.co/edit/EHehUR6qSi248vQPDntt?p=preview