如何延遲加載作爲一個孩子路由的路由/組件

Question

讓我們來看看我的plunker：https://plnkr.co/edit/22RIoGsvzfw2y2ZTnazg?p=preview

我想偷懶加載模塊作爲一個孩子的路線。

因此，路線/lazy應將LazyModule轉換爲我的MainComponent的<router-outlet>。

然後它會在DummyComponent和延遲加載的模塊之間切換。

相反，現在延遲加載模塊將被渲染到AppComponent ..

任何想法？

Answer 1

如果你想偷懶加載模塊，不導入它，你在這裏所做的：如果你加載模塊

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

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

（使用：

的src/app.tsimport）它將被捆綁到主模塊中而不是分離的塊。

被替換爲：

@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.module.ts： 你應該把你的路線確定（因爲它是兒童需要的模塊）但你的路線應該是空的，因爲他們會通過以下後綴他們的父母的路線。 （這裏：'/ lazy'）。

所以，如果你把：

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

您希望匹配/lazy/lazy使用你的懶惰組件，這是不是你想要的。

而是使用：

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

這裏的工作Plunkr：https://plnkr.co/edit/KdqKLokuAXcp5qecLslH?p=preview