延遲加載

Question

我試圖延遲加載模塊具有角2.

我有兩個模塊

1. 的AppModule（主模塊）
2. ProductModule（延遲加載模塊）

AppModule.ts

@NgModule({ 
    imports: [ 
     BrowserModule, 
     HttpModule, 
     RouterModule.forRoot([ 
      { path: 'welcome', component: WelcomeComponent }, 
      { path: '', redirectTo: 'welcome', pathMatch: 'full' }, 

      { path: 'products', loadChildren:'app/products/product.module#ProductModule'} 
     ]) 
    ], 
    declarations: [AppComponent, 
     WelcomeComponent 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

這裏我有兩條路線，一條是空白的默認路線，另一條是歡迎屏幕AppModule。它還包含一條路徑products以啓動延遲加載模塊和相關組件ProductModule。

現在ProductModule看起來是這樣的：

@NgModule({ 
    declarations: [ 
     ProductListComponent, 
     ProductDetailComponent, 
     ProductFilterPipe 
    ], 
    imports: [ 
     SharedModule, 
     RouterModule.forChild([ 
      { path: '', component: ProductListComponent }, 
      { path: 'product/:id', component: ProductDetailComponent, pathMatch:'full'} 
     ]) 
    ], 
    providers: [ 
     ProductService, 
     ProductDetailGuard 
    ] 
}) 
export class ProductModule { 

} 

，你可以看到我的ProductModule是有空路由（上市產品），並與product/id一條路線，顯示產品的詳細信息。

現在對於在ProductModule第一路由具有ProductListComponent是當我導航到http://localhost:3000/products這是確定的，但對於其時我導航到http://localhost:3000/products/product/1ProductDetailComponent被激活具有第二路徑激活。現在

的細節畫面網址，我不希望有產品在URL中。

我已經試過指定{ path: 'products', component: ProductListComponent }路線。但不幸的是，它不起作用。

請解釋一下我爲什麼它需要的產品在細節畫面URL，我怎麼可以把它激活了http://localhost:3000/product/1網址是什麼？

Answer 1

我認識到這段代碼。 :-)你見過我的路由課程嗎？我覆蓋這個。對於延遲加載的路由，基本路由必須相同。所以這兩條路線都需要從'產品'開始。

下面是一個例子：

RouterModule.forChild([ 
     { 
     path: '', 
     component: ProductListComponent 
     }, 
     { 
     path: ':id', 
     component: ProductDetailComponent 
     }, 
     { 
     path: ':id/edit', 
     component: ProductEditComponent, 
     canDeactivate: [ProductEditGuard] 
     } 
    ]) 

匹配路由名稱是必需的，因爲所有的延遲加載路線需要共享父路由。訪問的任何孩子的父路由將延遲加載路由。