Erstellen Sie eine Detailansicht unter einem übergeordneten Route

Sie kennen sicher die Helden Probe aus Winkel 2 Tutorial:Erstellen Sie eine Detailansicht unter einem übergeordneten Route

https://angular.io/resources/live-examples/toh-5/ts/plnkr.html

Wenn Sie eine dieser vier Top-Helden klicken Sie aus dem Verzeichnis/Armaturenbrett URL zum Detail/id erhalten url.

Dass die gesamte Dashboard-Komponente mit der Detailkomponente geschaltet wird, ist in Ordnung!

Was ich möchte, sich geändert zu haben ist, dass die URL ändert /dashboard-/dashboard/detail/id

Also meiner Route Config ich ändern, nur

path: '/detail/:id',

path: '/dashboard/detail/:id',

Das funktioniert aber Wenn die Dashboard-URL geändert wird, macht die URL /dashboard/detail/:id keinen Sinn mehr.

Ich möchte die detaillierte Route abhängig von der 'übergeordneten' Route konfigurieren.

Wie kann ich das tun?

Quelle

2016-04-19 Pascal

es ist nicht klar aus Ihrer Frage, was genau falsch ist? – kemsky

Wenn ich die Route durch die URL '/ dashboard' durch '/ test' ersetze, sollte die andere Route 'dashboard/detail /: id' ebenfalls zu 'test/detail /: id' wechseln. Das bedeutet, dass ich die URL des Elterns nicht in die Kind-URL fest codieren möchte. In angularjs 1.x und dem UI-Router hat der Status des Parents die URL geerbt: .state ('dashboard', also .state ('dashboard.detail', aufgelöst in der URL 'parentUrl/detail/3') Du bekommst es? – Pascal

Ich habe Routing geändert, um zu zeigen, wie es gemacht werden kann, siehe plunkr.

Im Allgemeinen ist es mit nicht-terminalen Routen und Kind-Router getan.

{ 
    path: '/dashboard/...', 
    name: 'Dashboard', 
    component: DashboardComponent, 
    useAsDefault: true 
}

Quelle

2016-04-19 21:47:09 kemsky

Fast perfekt, nur du hast mich leicht missverstanden Original Zitat: "Dass die gesamte Dashboard-Komponente mit der Detail-Komponente vertauscht ist, ist in Ordnung!" Ich möchte auch die 4 Helden verschwinden lassen und stattdessen das Detail-Formular gerendert darstellen. Stell dir einfach eine show_details-Schaltfläche vor über das Heldenraster klicken Sie darauf, dann sind die Details sichtbar und die Helden sind weg ... – Pascal

Ich habe Plunkr aktualisiert – kemsky

Ist es wirklich notwendig, dass die 'dashboard.component.ts' die gleiche Routendefinition mit dem Namen hat ' Dashboard 'scheint mir überflüssig, da die app/app.component.ts diese Definition bereits hat !? – Pascal

Erstellen Sie eine Detailansicht unter einem übergeordneten Route

Antwort

Verwandte Themen