Angular - как правильно реализовать Breadcrumbs для Lazy Loaded Modules? - PullRequest
Новая
       57

Angular - как правильно реализовать Breadcrumbs для Lazy Loaded Modules?

0 голосов
/ 27 апреля 2020

Я рекурсивно генерирую панировочные сухари на основе активированного маршрута для проекта Angular. Однако если я попытаюсь сгенерировать маршруты для загруженного с отложенным модулем модуля , то breadcrumb не будет работать должным образом.

Это мой основной маршрут приложений: 

const routes: Routes = [
  {
    path: 'user',
    loadChildren: () =>
      import('@app/+user/user.module').then(m => UserModule),
  },
  .......
]

Проблема в том, что когда я хочу получить доступ к дочерним компонентам внутри пользовательского модуля, маршрут обнуляется на уровне модуля. Затем первый дочерний элемент хлебной крошки указывает на root всего проекта, но не на модуль и т. Д.

Это маршрутизация загруженного модулем (пользователя): 

   const routes: Routes = [
    {
        path: '', // route gets nullified here
        component: UserComponent,
        data: {
          breadcrumb: 'User',
        },
        children: [
            {
                path: 'account/:id',
                component: AccountComponent,
                data: {
                    breadcrumb: 'Account',
                },
                children: [
                    {
                        path: 'details',
                        component: DetailsInfoComponent,
                        data: {
                          breadcrumb: 'Details',
                        },
                    },
                ]
            }
        ]   
    }
]

следовательно, для маршрута localhost: 4200 / user / account / 777 / details У меня есть такие хлебные крошки: User -> 777 -> Details

и ссылки должны работать следующим образом: 

 User -> localhost:4200/user
 777  -> localhost:4200/user/account/777
 Details -> localhost:4200/user/account/777/details

, тогда как они работают таким образом (user фрагмент отсутствует в создаваемых ссылках): 

 User -> localhost:4200
 777  -> localhost:4200/account/777
 Details -> localhost:4200/account/777/details

Здесь Вот как создаются хлебные крошки: 

  /**
   * Recursively build breadcrumb according to activated route.
   */
  buildBreadCrumb(
    route: ActivatedRoute,
    url: string = '',
    breadcrumbs: IBreadCrumb[] = [],
  ): IBreadCrumb[] {
    //If no routeConfig is avalailable we are on the root path
    let label =
      route.routeConfig && route.routeConfig.data
        ? route.routeConfig.data.breadcrumb
        : ''
    let path =
      route.routeConfig && route.routeConfig.data ? route.routeConfig.path : ''

    // If the route is dynamic route such as ':id', remove it
    const lastRoutePart = path !== undefined ? path.split('/').pop() : ''
    const isDynamicRoute = lastRoutePart.startsWith(':')

    if (isDynamicRoute && !!route.snapshot) {
      const paramName = lastRoutePart.split(':')[1]
      path = path.replace(lastRoutePart, route.snapshot.params[paramName])
      label = route.snapshot.params[paramName]
    }

    //In the routeConfig the complete path is not available,so we rebuild it each time
    const nextUrl = path ? `${url}/${path}` : url

    const breadcrumb: IBreadCrumb = {
      label: label,
      url: nextUrl,
    }

    // Only adding route with non-empty label
    const newBreadcrumbs = breadcrumb.label
      ? [...breadcrumbs, breadcrumb]
      : [...breadcrumbs]

    if (route.firstChild) {
      /**
       *  If we are not on our current path yet,
       *  there will be more children to look after, to build our breadcumb
       */
      return this.buildBreadCrumb(route.firstChild, nextUrl, newBreadcrumbs)
    }

    return newBreadcrumbs
  }

, а это HTML часть: 

<ol class="breadcrumb">
  <li *ngFor="let breadcrumb of breadcrumbs">
    <a [routerLink]="breadcrumb.url" routerLinkActive="router-link-active">
      {{ breadcrumb.label }}
    </a>
  </li>
</ol>

Есть ли способ решить эту проблему? Спасибо

...