Question

我有一个angular 6应用程序，其中正在使用延迟加载。

延迟加载效果很好。

我的问题是我想根据路由在子模块中加载不同的组件。

这是我的App.Routes

export const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },        
    { path: 'login', component: HomeComponent },
    { path: 'manage/:id', loadChildren: './admin/admin.module#AdminModule' },
    { path: 'organisation-list', loadChildren: './admin/admin.module#AdminModule' }        
];

因此，对于网址http：app.xxx.com/organisation-list，它会使用路由加载管理模块

const routes: Routes = [
{ path: 'manage/:id', component: FlowListComponent },
{ path: 'organisation-list', component: PowerComponent },
{ path: '', component: FlowListComponent }

];

现在，我期望组件PowerComponent被加载。这不会发生，而是加载默认的FlowListComponent吗？

我尝试过各种方法，但是我认为我对这种方法的基本理解是错误的。

Answer 1

我认为您可以这样做管理员路线

const routes: Routes = [
  { path: '', component: PowerComponent },
  { path: 'manage/:id', component: FlowListComponent },
  { path: 'organisation-list', component: PowerComponent },
  { path: 'flow-list', component: FlowListComponent }

默认路径是''''，我刚刚在一个项目中检查过它。

Answer 2

正如@abetteroliver所建议的那样，我需要更改自己的网址，所以现在有了

export const routes: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full' },        
{ path: 'login', component: HomeComponent },
{ path: 'manage/:id', loadChildren: './admin/admin.module#AdminModule' },
{ path: 'admin', loadChildren: './admin/admin.module#AdminModule' }

];

和...

const routes: Routes = [
{ path: 'manage/:id', component: FlowListComponent },
{ path: 'organisation-list', component: PowerComponent },
{ path: 'campaign-detail/:id', component: CampaignDetailComponent },]

加载组织列表组件时，我使用网址

app.xxx.com/admin/organisation-list

延迟加载路由未打开子模块组件

2 个答案: