基于 URL 参数的 Angular 延迟加载模块

Question

我正在开发一个 Angular 7 应用程序，现在正在基于路由设置延迟加载模块。我想根据 URL 参数延迟加载不同的模块。我似乎无法弄清楚如何让它发挥作用。

这是 UI 的构造示意图：

我想要发生的是这样的路径：

/page/type-of-items/type-of-item 加载应用程序，然后延迟加载页面模块，然后根据@987654323 的值延迟加载正确的“项目类型”模块@ 在 URL 中，然后它将根据 URL 加载正确的 :item 组件。

问题在于，当访问此 URL：/page/foo/item-a 时，NotFoundPageComponent 会被渲染。我在这里做错了什么？

这是我目前的路由模块集：

app-routing.module：

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

page.module：

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

Answer 1

试试这个

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