Модуль отложенной загрузки Angular на основе параметра URL

#angular

Вопрос:

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

Вот схема построения пользовательского интерфейса:

Я хочу, чтобы это произошло для такого пути, как этот:

/страница / тип элементов / type-of-item чтобы загрузить приложение, затем лениво загрузите модуль страницы, который затем лениво загрузит правильный модуль «тип элементов» на основе значения :type-of-items в URL, который затем загрузит правильный :item компонент на основе URL.

Проблема в том, что при переходе по этому URL: /page/foo/item-a NotFoundPageComponent отображается. Что я здесь делаю неправильно?

Это мой текущий набор модулей маршрутизации:

app-routing.module:

 const routes: Routes = [
  {
    path: 'page',
    loadChildren: './page.module#PageModule'
  },
  {
    path: '**',
    component: NotFoundPageComponent
  }
];

страница.модуль:

 const routes: Routes = [
  {
    path: ':type-of-items',
    component: PageComponent
  },
  {
    path: 'foo',
    loadChildren: '../foo.module#FooModule'
  }
];

Обратите внимание, что PageComponent необходимо знать значение :type-of-items для получения некоторых контекстных данных, поэтому он параметризован. В данном случае это значение равно «foo».

foo.module:

 const routes: Routes = [
  {
    path: '',
    component: FooComponent,
    children: [
      {
        path: 'item-a',
        component: ItemAComponent
      },
      {
        path: 'item-b',
        component: ItemBComponent
      }
    ]
  }
];

1. Я предполагаю, что в ваших page.module маршрутах путь сопоставляется с ':type-of-items' path и не имеет возможности добраться до 'foo' . Измените порядок следования маршрутов в page.module , сначала выбрав наиболее конкретный.

2. Спасибо @JasonWhite, но это дает тот же результат.

3. Находится ли модуль foo внутри модуля страницы? или они находятся на одном уровне каталога? Причина, по которой я спрашиваю, заключается в том, что путь отложенной загрузки для модуля foo является ../ и не ./ является.

4. Я упростил пути к модулям. Я не беспокоюсь о том, верны ли пути, поскольку была бы выдана ошибка, если бы у меня были неправильные пути — и я этого не вижу.

Ответ №1:

Попробуйте это

 const routes: Routes = [
{ path: '', 
  component: SomeTopLevelComponent, // might not need
  children: [{
    path: 'page',
    loadChildren: './page.module#PageModule'
  }]},
  {
    path: '**',
    component: NotFoundPageComponent
  }
];