延迟加载模块路由路径问题

Question

我正在尝试使用 angular 2.

延迟加载模块

我有两个模块

AppModule（主模块）
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 中的第一条路线在我导航到 http://localhost:3000/products which is OK but for the second route which is having ProductDetailComponent is activated when I navigated to http://localhost:3000/products/product/1.

时激活了 ProductListComponent

现在进入详细信息屏幕 url 我不想在 url 中有产品。

我已经尝试指定 { path: 'products', component: ProductListComponent } 路线。可惜没用

请解释为什么它需要详细信息屏幕中的产品 URL 以及如何在 http://localhost:3000/product/1 上激活它 URL?

Answer 1

我认识这个代码。 :-) 你看过我的路由教程了吗？我覆盖这个。对于延迟加载的路由，基本路由必须相同。所以两条路线都需要以'products'.

开头

这是一个例子：

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

需要匹配的路由名称，因为所有延迟加载的路由都需要共享一个父路由。访问 any 子路由的父路由将延迟加载路由。

延迟加载模块路由路径问题

Lazy loading of Module routing path issue

lazy-loading

angular2-routing

angular