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

我希望这对您有用。

参考 Angular: Lazy loading feature modules

角延迟加载路由

1 个答案: