【发布时间】：2020-11-02 14:07:20
【问题描述】：
我有一个主应用程序，在单击菜单时，我正在加载一个新的延迟加载子模块（productModule）。我想在 productModule 上有多个路线，但它不起作用。任何人都可以帮忙吗？我努力了 cannot find module in angular Lazy Loading 和 lazy load module inside main component in Angular 10 还有更多。
这里是代码
app.component.ts
@Component({
selector: 'pm-root',
template: `<div>
<nav-bar></nav-bar>
<router-outlet></router-outlet>
</div>`
})
和
app-routing.module
const routes: Routes = [
...
...
{path:'user',loadChildren:()=>import('./profile/UserModule/user.module').then(m=>m.UserModule)},
{path:'product',loadChildren : () => import('./pluralsightproject/product/product.module').then(mod => mod.ProductModule)} // <== this is the module
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
然后在我的产品模块中，默认情况下我正在加载一个页面，其中产品将在表格中列出，如果我单击产品，则应显示该产品的详细信息（显示产品的页面）
product.module.ts
const productRoutes: Routes = [
{ path: 'productsList', component: ProductListComponent},
{ path: 'productdetail/:id', component: ProductDetailComponent } //<= this path is not working
];
@NgModule({
declarations: [
ProductListComponent,
ConvertToSpacePipe,
StarComponent,
ProductDetailComponent
],
imports: [
CommonModule,
RouterModule.forChild(productRoutes),
FormsModule,
//HttpClientModule,
],
providers: []
})
现在是激活路线的代码。
product-list.component
<div class="table-responsive">
<table class="table table-hover table-dark">
. . .
<tbody>
<tr *ngFor="let product of filteredProducts" >
<td><img *ngIf="imageShown" [src]="product.imageUrl" alt={{product.productName}}></td>
<td>{{product.productName}}</td>
<td>{{product.productCode | convertToSpace:'-' | uppercase}}</td>
<td>{{product.releaseDate}}</td>
<td>{{product.price | currency : 'INR':'symbol'}}</td>
//****HERE I HAVE PLACED A BUTTON WHICH SHOULD ACTIVATE THE ROUTE*****
<td><button [routerLink]="['/productdetail',product.productId]" routerLinkActive="router-link-active">click</button></td>
</tr>
</tbody>
</table>
</div>
当我单击按钮以获取产品详细信息时，出现以下错误
core.js:4197 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'productdetail/1'
Error: Cannot match any routes. URL Segment: 'productdetail/1'
at ApplyRedirects.noMatchError (router.js:2270)
我错过了什么？
我的环境详情
Angular CLI: 10.0.4
Node: 12.18.3
OS: win32 x64
Angular: 10.0.6
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1000.4
@angular-devkit/build-angular 0.1000.4
@angular-devkit/build-optimizer 0.1000.4
@angular-devkit/build-webpack 0.1000.4
@angular-devkit/core 10.0.4
@angular-devkit/schematics 10.0.4
@angular/cli 10.0.4
@ngtools/webpack 10.0.4
@schematics/angular 10.0.4
@schematics/update 0.1000.4
rxjs 6.5.5
typescript 3.9.7
webpack 4.43.0
【问题讨论】：
-
你的 url 段应该是 product/productdetail/1 而不仅仅是 productdetail/1
-
@Sam 是的，先生，我明白这一点，但我该怎么做呢？如果我将
product/productdetail放在 HTML 文件中按钮的routerLink中，则 URL 变为product/productList/product/productdetail/1 -
使用`[routerLink]="['/product', 'productdetail',product.productId]"`
标签： angular typescript angular10