Pesquisa de site

angular - breadcrumbs como obter informações sobre uma rota tendo apenas sua URL


Estou tendo problemas para implementar breadcrumbs

Minhas rotas são assim:

(Não posso mudar seu design para que o detalhe seja uma rota filha da lista, também não posso fazer nada sobre ':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

Espera-se que eu obtenha uma trilha de navegação como:

 Home         > list                       > detail
(path 'admin') (path 'admin/:app/:pattern') (path 'admin/:app/:pattern/detail:id') 

então, abordar com o evento 'NavigationEnd' e obter informações da rota ativada pai não me dá opção de implementar isso da maneira necessária, já que apenas 'home' é a rota pai, o breadcrumb sempre terá apenas um elemento: Home

Minhas perguntas são

  1. Existe uma maneira de obter informações da rota sabendo apenas o caminho da URL (exemplo no componente de detalhes, obter informações sobre a lista 'admin/:app/:pattern' do caminho)

  2. Ou como implementá-lo de outra maneira?

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