Question

让我们来看看我的傻瓜：https://plnkr.co/edit/22RIoGsvzfw2y2ZTnazg?p=preview

我想将模块作为子路径延迟加载。

因此，路线/lazy应将LazyModule呈现给<router-outlet>的{{1}}。

然后它将在MainComponent和延迟加载的模块之间切换。

现在，延迟加载的模块将呈现为DummyComponent ..

有什么想法吗？

Answer 1

如果您想延迟加载模块，请不要像在此处那样导入它：

src / app.ts ：

import { LazyModule } from './lazy/lazy.module';
...

@NgModule({
  imports: [ BrowserModule, RouterModule.forRoot(routes), LazyModule ]

如果您加载一个模块（使用import），它将被捆绑到主模块中，而不是具有单独的块。

将其替换为：

@NgModule({
  imports: [ BrowserModule, RouterModule.forRoot(routes) ]

然后你的路线应该是这样的：

const routes = [
  {
    path: '',
    component: MainComponent,
    children: [
      {
        path: '',
        component: DummyComponent
      },
      // should be rendered as a CHILD of my MainComponent .. !!
      {
        path: 'lazy',
        loadChildren: 'src/lazy/lazy.module#LazyModule'
      }
    ]
  }
];

请注意，loadChildren路径现在从src开始。

对于 src / lazy / lazy.module.ts ：您应该定义您的路线（因为它是儿童模块所需的）但是您的路线应该是空的，因为它们将以其父路线为后缀。（这里：'/ lazy'）。

所以，如果你把：

const routes = [
  {
    path: 'lazy',
    component: LazyComponent
  }
];

您希望匹配/lazy/lazy以使用您的惰性组件，这不是您想要的。

改为使用：

const routes = [
  {
    path: '',
    component: LazyComponent
  }
]

这是工作中的Plunkr：https://plnkr.co/edit/KdqKLokuAXcp5qecLslH?p=preview

如何将路由作为子路由/组件延迟加载

1 个答案: