功能模块路由中的子路由在 Angular 8 中不起作用并且转到未找到页面

Question

我创建了一个产品模块作为特色模块，并将产品模块中特色模块的所有子路由从“app-routing.module.ts”转移。我还没有添加延迟加载。但是在分离产品路线后，子路线不起作用。路由正在重定向到 pagenotfound 路由。

app-routing.module.ts

const routes:Routes=[
  {path:'',redirectTo:'/home',pathMatch:'full'},
  {path:'home',component:HomeComponent},
  {path:'about',component:AboutComponent},
  {path:'product',component:ProductComponent},
  {path:'contact',component:ContactComponent},
  {path:'buy product',component:ParentComponent},
  {path:'view',component:ViewchildComponent},
  {path:"**", component:PageNotFoundComponent}
];
@NgModule({
  imports:[RouterModule.forRoot(routes,{ enableTracing: false })],
  exports:[RouterModule]

})

app.component.html

<nav mat-tab-nav-bar ngClass = "tabs">
  <a mat-tab-link routerLink="/home" routerLinkActive="active">Home</a>
  <a mat-tab-link routerLink="/about" routerLinkActive="active-link">About US</a>
  <a mat-tab-link routerLink="/product" routerLinkActive="active-link">Products</a>
  <a mat-tab-link routerLink="/contact" routerLinkActive="active-link">Contact Us</a>
  <a mat-tab-link routerLink="/buy product" routerLinkActive="active-link">Buy Product</a>
  <a mat-tab-link routerLink="/view" routerLinkActive="active-link">View Child</a>
  
</nav>  
 <router-outlet></router-outlet> 

product.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LatopComponent } from './latop/latop.component';
import { MobileComponent } from './mobile/mobile.component';
import { ComputerComponent } from './computer/computer.component';
import { MachineComponent } from './machine/machine.component';
 import {RouterModule, Routes} from '@angular/router';
import { ProductComponent } from './product.component';
import { MaterialModule } from '../material/material.module';

const proRoute:Routes=[ {path:'product',children:[
  {path:'',component:ProductComponent},
  {path:'laptop', component:LatopComponent},
  {path:'mobile',component:MobileComponent},
  {path:'computer',component:ComputerComponent},
  {path:'wahing machine',component:MachineComponent}
]}]

@NgModule({
  declarations: [ 
    ProductComponent,
    LatopComponent,
    MobileComponent,
    ComputerComponent,
    MachineComponent
    
  ],
  imports: [
    CommonModule,
   MaterialModule,
   RouterModule.forChild(proRoute)
    
  ]
  
})
export class ProductModule { }

product.component.html

<a routerLink='/laptop' mat-raised-button color="primary">Know Laptop</a>
<a routerLink='/mobile' mat-raised-button color="primary">Know Mobile</a>
<a routerLink='/computer' mat-raised-button color="primary">Know Computer</a>
<a routerLink='/wahing machine' mat-raised-button color="primary">Know Washing Machine</a>

Answer 1

看起来您的 AppRoutingModule 和 ProductModule 都在注册 product 路由。从您的 AppRoutingModule 中删除一个，路由注册应该可以工作。

（还要确保您的 ProductModule 已导入到 AppModule 中，请记住，一旦您设置了延迟加载，就必须将其删除。）