Question

我有一个主应用程序，并且在单击菜单时，我正在加载一个新的延迟加载子模块（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]
})

然后默认情况下，在我的产品模块中，我将加载一个页面，该页面将在表格中列出产品，如果单击某个产品，则应显示该产品的详细信息（在其中显示该产品的页面）< / p>

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

Answer 1

请考虑以下

当用户访问ProductModule时，您就懒于加载/product。因此，用户必须访问/products才能激活子路由

/product路由的所有子路由必须具有/product/path/to/route。对于您的情况，这将是/product/productdetail/1

要解决此问题，您将必须更改路由器链接以反映这一点

<button [routerLink]="['/product', 'productdetail',product.productId]" routerLinkActive="router-link-active">click</button>

多个路由在角度10延迟加载的模块中不起作用

1 个答案: