如何在Angular 4中配置路由,以便将特征模型路由作为小孩按顺序进行



项目结构:

 /app
   app.module.ts
   app.routing.ts
   :
   :
   /dashboardModule
   /manage-productModule  
      manage-product.module.ts
      manage-product.routing.ts

在'app.routing.ts'

[
  {
   path : '',
   loadchildren: 'loginModulepath/loginmoduleName#className'
  },
  {
   path : 'dashboard',
   component: dashboardReportComponent
  }
  {
   path : 'manage-products'
   loadchildren: 'manage-productModule-path/manage-product-moduleName#manageProductClassName'
  }
]

在模块中:管理products/manage-product.routing.ts

 const manageProdRoute =
 [
  {
   path : '',
   component: manageProductListComponent
  },
  {
   path : 'detail',
   component: manageProdDetailComponent
  }
 ]

和,

 import:[ routerModule.forChild(manageProdRoute)]

目标:

如果用户类型url:port/ =>它将重定向到url:port/login/如果用户类型/单击链接go url:port/manage-products =>它将加载 manageProductListComponent

问题

但是,当我尝试加载URL:port以转到登录页面时,它会加载manageProductListComponent。即使我从app.routing.ts评论manage-product部分,它的行为相同,但是如果我提到app.routing.ts中所有模块的所有孩子,则可以正常工作。

问题我需要采取的措施将所有基于模块的路由保留在单个routing.ts中并在app.routing.ts中导入它们,以便它们在?

中工作

您可以使用以下代码示例: -

[
{ path: '', redirectTo: 'login', pathMatch: 'full'},
{ path: 'login', 
   children: [
        { path: '', component: yourLoginComponent},
        { path: 'dashboard', component: your-dashboardReportComponent},      
   ]
},
{ path: 'manage-products', 
   children: [
        { path: '', component: your-manageProdDetailComponent},           
   ]
},
];

您已将空的路径匹配为 ManageProductListComponent 是原因

{
   path : '',
   component: manageProductListComponent
 },

最新更新