網站搜尋

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。

我的問題是

  1. 是否有方法僅知道 URL 路徑就獲取路由資訊(例如在詳細元件中獲取關於 'admin/:app/:pattern' 列表路徑的資訊)

  2. 或者如何用另一種方式實現它?

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', },
        ]
    },
];