角度6：如何在同一路线上使用多个loadChildren？

Question

我有类似的东西：

const routes: Routes = [
  {
    path: ':path', component: SiteRoot, children: [
      { path: '', loadChildren: '../modules/maple/template.module#TemplateModule' }
    ]
  }
];

我希望使用此：path网址来动态匹配多个模块。 每个模块都有自己的内部路由。

有什么办法可以实现？

我用ResolveComponentFactory尝试了ViewContainerRef，但它不适用于仅模块组件。 NgModuleFactoryLoader事件，无法应用路由。

编辑，以使一切都清楚：

我试图实现的是在同一路径上显示不同的模块。 例如，用户可以在“主”路径中看到用户仪表板，而管理员也可以在“主”路径中看到管理仪表板。

此功能由业务逻辑定义，因此，我无法将管理仪表板更改为另一个URL

Answer 1

我认为您正在尝试错误地创建路由模块。 无论如何，您应该写出为什么需要这个。 我会尽力回答。 每个模块应具有自己的路径，因此路由模块应严格且静态。 如果为了安全起见，请使用防护装置并从菜单组件中隐藏项目。

如果您需要这样的URL：“ / username1 / profile”，“ / username2 / profile”，则可以简单地使用类似您的代码，或使用延迟加载。 为父模块创建路由文件：

{ path: ':username', loadChildren: '../users/user.module#UserModule' }

比为子模块创建路由文件：

{ path: '', loadChildren: 'UserComponent', children: [
  { path: '', redirectTo: 'profile' },
  { path: 'profile', component: ProfileComponent}
 ]
}

根据您的情况更新：

根据您的情况，您可以更改HTML文件。 例如在app.component.html中，如果您的代码是：

 <div>
   <router-outlet></router-outlet>
 </div> 

您可以使用以下方法进行更改：

 <div *ngIf="isLoggedIn | async">
   <admin-panel></admin-panel>
 </div>
 <div *ngIf="(!isLoggedIn | async)">
   <router-outlet></router-outlet>
 </div>