时间戳

首页 > 解决方案 > 我可以为延迟加载模块中的组件创建参数化子路由吗？

angular - 我可以为延迟加载模块中的组件创建参数化子路由吗？

问题描述

我的 app.routing.module 如下

{ path: 'dashboard', component: DashboardComponent },
{ path: 'reports', loadChildren: () => import('./reports/reports.module').then(m => m.ReportsModule)

并且延迟加载模块的路由如下

  path: '', component: ReportsComponent, 
  children: [
  { path : 'reports/:d_name' ,component: ReportdetailComponent },

现在我如何导航到延迟加载模块的参数化子路由？

标签： angularrouteslazy-loading

解决方案

你写的当前路线是reports/reports/:d_name

你应该在你的子路由器中这样写你的路由

 path: '', component: ReportsComponent, 
  children: [
  { path : ':d_name' ,component: ReportdetailComponent },

编辑 ：

{path: '', component: ReportsComponent, 
children: [{ path : ':d_name' ,component: ReportdetailComponent }] }]

当您将子属性添加到当前路径时，这意味着它是父组件的角色来处理使用 a 的路由<router-outlet></router-outlet> 。在这种情况下，ReportsComponent需要一个 router-outlet。如果您想为每个子组件设置一个顶级组件并且只使用子组件修改页面的一部分，这将很有用。

 {  path: '', component: ReportsComponent}, 
 { path : ':d_name' ,component: ReportdetailComponent }

如果您只需要应用程序的主路由器，则应避免使用 children 属性。

这取决于您的需求，如果您提供更多详细信息，我可以更好地理解上下文。

推荐阅读