Angular 角度延迟加载路由

我有如下延迟加载应用程序路由：

app.routing.ts

我的延迟加载模块路由如下所示

const routes: Routes = [
    {
      path: '',
      children: [
        { path: '', component: ReportsComponent },
        { path: ':id',component: ViewReport},
        { path: '**', component: ViewReport }
      ]
    },
    {
      path: '',
      children: [
        { path: '', component: ReportBuilderComponent },
        { path: 'edit/:id', component: DesignReport },
        { path: '**', component: DesignReport }
      ]
    }

我试图实现，当用户单击reports路由时，导航到默认Reportscomponent，当单击reportBuilder路由时，导航到ReportBuilderComponent

如何实现这一点。

方法1

创建两个模块，一个用于报表，另一个用于报表生成器

app.report-routing.ts

在report.module中配置以上路由

app.report-builder-routing.ts

在report-builder.module中配置上述路由

app.routing.js

方法2

app.report-routing.ts

app.routing.ts

我希望这对你有用

参考文献

---

最简单的方法是为报表生成器路径创建另一个路由模块。但我想在同一个模块中执行此操作，因为它们都共享相同的服务和公共组件。在这种情况下，请尝试方法2，方法1可以有/report和/report builder url端点，方法2可以有/report和/report/builder端点

const routes: Routes = [
    {
      path: '',
      children: [
        { path: '', component: ReportsComponent },
        { path: ':id',component: ViewReport},
        { path: '**', component: ViewReport }
      ]
    },
    {
      path: '',
      children: [
        { path: '', component: ReportBuilderComponent },
        { path: 'edit/:id', component: DesignReport },
        { path: '**', component: DesignReport }
      ]
    }

const routes: Routes = [
    {
       path: '',
       children: [
           { path: '', component: ReportsComponent },
           { path: ':id',component: ViewReport},
           { path: '**', component: ViewReport }]
    }
]

const routes: Routes = [
    {
      path: '',
      children: [
        { path: '', component: ReportBuilderComponent },
        { path: 'edit/:id', component: DesignReport },
        { path: '**', component: DesignReport }
      ]
    }
]

{
  path: 'reports',
  loadChildren: () => import('../Reporting/report.module').then(m => m.ReportingModule)
},
{
  path: 'report-builder',
  loadChildren: () => import('../Reporting/report-builder.module').then(m => m.ReportBuilderModule)
}

const routes: Routes = [
    {
      path: '',
      children: [
        { path: '', component: ReportsComponent },
        { path: ':id',component: ViewReport},
        { path: '**', component: ViewReport }
      ]
    },
    {
      path: 'builder',
      children: [
        { path: '', component: ReportBuilderComponent },
        { path: 'edit/:id', component: DesignReport },
        { path: '**', component: DesignReport }
      ]
    }

{
  path: 'report',
  loadChildren: () => import('../Reporting/reporting.module').then(m => m.ReportingModule)
}