角延迟加载路由

Question

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

app.routing.ts

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

我的延迟加载模块的路由看起来像这样

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 }
      ]
    }

[我正在尝试实现，当用户单击报表路径时，导航到默认Reportscomponent，而在单击reportBuilder路径时，导航到ReportBuilderComponent。

如何实现。

Answer 1

创建两个模块，一个用于报告，一个用于报告构建器。

app.report-routing.ts

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

在report.module中配置以上路由

app.report-builder-routing.ts

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

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

app.routing.js

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

我希望这对您有用。