角延迟加载路由

2024-05-18 • 问答

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

app.routing.ts

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

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

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

我正在尝试实现以下目的：当用户单击报表路径时，导航到默认的Reportscomponent，并且在单击reportBuilder路径时，导航到ReportBuilderComponent。

如何实现这一目标。

方法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 },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: '',component: ViewReport }
      ]
    },{
      path: 'builder',component: DesignReport }
      ]
    }

app.routing.ts

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

我希望这对您有用。

参考 Angular: Lazy loading feature modules

角延迟加载路由

zzzz1287 回答：角延迟加载路由

大家都在问