Используйте несколько лениво загруженных маршрутов/путей, используя один модуль

#angular

Вопрос:

Я пытаюсь настроить несколько горизонтальных маршрутов (т. Е. — не вложенных) и поместить их в один лениво загруженный модуль.

Дело в том, что я не могу понять, как сопоставить эти маршруты в самом функциональном модуле с ленивой загрузкой.

Вот как выглядит основной модуль маршрутизации —

       {
        path: 'search/:query',
        loadChildren: () => import('src/pages/archives.module').then(m => m.ArchivesModule),
      },
      {
        path: 'category/:category',
        loadChildren: () => import('src/pages/archives.module').then(m => m.ArchivesModule),
      },
      {
        path: 'tag/:tag',
        loadChildren: () => import('src/pages/archives.module').then(m => m.ArchivesModule),
      },
 

Затем, внутри моего функционального модуля, я пытаюсь сопоставить эти маршруты на основе пути, но это не работает —

       {
        path: 'search/:query',
        component: SearchComponent,
        resolver: SearchResolver,
      },
      {
        path: 'category/:category',
        component: CategoryComponent,
        resolver: CategoryResolver,
      },
      {
        path: 'tag/:tag',
        component: TagComponent,
        resolver: TagResolver,
      },
 

Это работает, когда я пытаюсь получить полный доступ к дублированным маршрутам, например:

 domain.com/category/:cat/category/:cat
 

Поэтому я думаю, что единственное, чего не хватает, — это способ сопоставления родительских маршрутов в модуле функций, но я ничего не смог найти вокруг него.

Комментарии:

1. можете ли вы подробнее объяснить свой вариант использования здесь ?

2. Пожалуйста, добавьте ваше ожидаемое поведение и ожидаемый URL-адрес, по которому вы хотите добиться успеха

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

4. @tlt2w один из вариантов-вы можете использовать только один родительский путь маршрута achives и лениво загружать его с помощью achive-модуля. затем внутри модуля achive вы можете использовать category/:category и так далее.. таким образом, конечный путь маршрута будет выглядеть так achives/category/`` or : achives/поиск/1` и т. Д. Таким образом, у вас может быть новая структура маршрута. смотрите эту демонстрацию здесь stackblitz.com/edit/…

5. Да, очевидно, что это обходной путь, но он не отвечает на мой вопрос. Я в основном пытаюсь понять, возможно ли иметь разные пути/маршруты, ведущие к одному и тому же модулю.

Ответ №1:

Структура кода не является чистой. Вы создаете модуль, который перенаправляет к другому модулю три маршрута. Почему бы не удалить маршруты из родительского модуля, а просто создать их в функциональном модуле. Родительский модуль:

 {
    path: '/',
    loadChildren: () => import('src/pages/archives.module').then(m => m.ArchivesModule),
  }
  
 

Модуль Функций:

 {
    path: 'search/:query',
    component: SearchComponent,
    resolver: SearchResolver,
  },
  {
    path: 'category/:category',
    component: CategoryComponent,
    resolver: CategoryResolver,
  },
  {
    path: 'tag/:tag',
    component: TagComponent,
    resolver: TagResolver,
  },
 

Комментарии:

1. Спасибо за ответ! В основном настроена куча других маршрутов и путей, включая корневой («/»). Это приводит либо к другим лениво загруженным модулям, либо к обычным компонентам. Вот почему я пытаюсь отправить эти совершенно разные маршруты в один и тот же модуль (а не создавать 3 отдельных модуля)