角延迟加载路由

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

方法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)
}

方法2

app.report-routing.ts

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

app.routing.ts

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

我希望这对你有用。

参考角度:延迟加载功能模块