angular - 麵包屑如何僅透過其 URL 獲取路由資訊
我在實作麵包屑導航時遇到麻煩
我的路線是這樣的:
(我無法更改其設計,使細節成為列表的子路由,也無法對 ‘:app/:pattern’ 做任何處理)
admin - path 'admin'
L dashboard -> path '' - component: DashboardComponent
L list -> path ':app/:pattern' - component: ListComponent
L detail -> path ':app/:pattern/detail:id' - component: DetailComponent
我預期會得到像這樣的麵包屑:
Home > list > detail
(path 'admin') (path 'admin/:app/:pattern') (path 'admin/:app/:pattern/detail:id')
所以使用 'NavigationEnd' 事件並獲取父 Activated route 資訊,並不能讓我以需要的方式實現這個功能,因為只有 Home 是父路由,麵包屑將永遠只有一個元素 Home。
我的問題是
是否有方法僅知道 URL 路徑就獲取路由資訊(例如在詳細元件中獲取關於 'admin/:app/:pattern' 列表路徑的資訊)
或者如何用另一種方式實現它?
app-routing.module.ts
const routes: Routes = [
{ path: '', redirectTo: '/admin', pathMatch: 'full' },
{ path: 'admin/login', component: LoginComponent, canActivate [LoginGuard], },
{ path: 'admin/404', component: NotFoundComponent, canActivate: [AuthGuard], },
{
path: 'admin',
component: HomeComponent,
canActivate: [AuthGuard],
data: { breadcrumb: 'Home' },
children: [
{ path: '',
component: DashboardComponent,
data: { breadcrumb: 'Dashboard' }
},
{ path: ':app/:pattern',
component: ListComponent,
data: { breadcrumb: 'List' }
},
{ path: ':app/:pattern/detail/:id',
component: DetailComponent,
data: { breadcrumb: 'Detail' }
},
{ path: ':app/:pattern/action/:id',
component: ActionComponent,
data: { breadcrumb: 'Action' }
},
{ path: '**', redirectTo: '/admin/404', },
]
},
];