基于URL参数的

Question

我正在使用Angular 7应用，现在正在基于路由设置延迟加载的模块。我想根据URL参数延迟加载不同的模块。我似乎无法弄清楚该如何工作。

以下是用户界面的构造示意图：

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

/ page / item-of-items / item-of-item来加载应用程序，然后延迟加载page模块，然后页面将基于{{{ 1}}，然后将根据URL加载正确的:type-of-items组件。

问题在于，当转到以下URL时：:item /page/foo/item-a被渲染。我在这里做什么不正确？

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

应用程序路由模块：

NotFoundPageComponent

page.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的值才能获取一些上下文数据，这就是为什么要对其进行参数化的原因。在这种情况下，其值为“ foo”。

foo.module：

:type-of-items

Answer 1

尝试一下

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