Question

我试图用角度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时ProductListComponent中的第一条路线被激活，当我导航到 http://localhost:3000/products 时，这是正常的但是对于第二条路线ProductDetailComponent导航到 http://localhost:3000/products/product/1 时会激活{1}}。

现在，对于详情屏幕网址，我不想在网址中包含产品。

我已尝试指定{ path: 'products', component: ProductListComponent }路线。但不幸的是它没有用。

请解释一下为什么它需要详细屏幕网址中的产品，以及如何在 http://localhost:3000/product/1 网址上激活它？

Answer 1

我认识到这段代码。 :-)你看过我的路线课吗？我掩盖了这个。对于延迟加载的路由，基本路由必须相同。因此，两条路线都需要以“产品”开头。

以下是一个例子：

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

匹配的路由名称是必需的，因为所有延迟加载的路由都需要共享父路由。访问任何子项的父路由将延迟加载路由。

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

1 个答案: