如何根据条件加载角度模块

Posted

技术标签:

【中文标题】如何根据条件加载角度模块【英文标题】:how to load angular modules based on condition 【发布时间】:2020-10-20 01:28:24 【问题描述】:

我的应用程序主页中有三个模块,moduleA 和 moduleB 在我的应用程序组件中,我正在调用一个名为 session 的 API,并获得一个名为 mode 的响应值。如果模式是模块A,那么我必须从主模块延迟加载模块A模块,如果模式是模块B,那么模块B模块是从主模块加载的。 home 模块是从 app 模块加载的。

任何人都可以建议如何实现这一点。

【问题讨论】:

【参考方案1】:

假设你的路由数组是这样构建的:

const routes: Routes = [
  
    path: 'app', component: AppComponent
  ,
  
    path: 'home', loadChildren: () => import('../features/home/home.module').then(x => x.Home)
  ,
  
    path: 'moduleA', loadChildren: () => import('../features/moduleA/moduleA.module').then(x => x.ModuleA)
  ,
  
    path: 'moduleB', loadChildren: () => import('../features/moduleB/moduleB.module').then(x => x.ModuleB)
  ,
  
    path: 'moduleC', loadChildren: () => import('../features/moduleC/moduleC.module').then(x => x.ModuleC)
  
];

还有你的 Mode 枚举:

enum Mode 
  ModuleA = "moduleA",
  ModuleB = "moduleB",
  ModuleC = "moduleC"

只需让 API 调用您的服务器,然后根据响应进行导航:

  constructor(private http: HttpClient,private router: Router)  

 public navigate(internalRoute: string): void 
   this.http.get<Mode>('/loadModule').subscribe(x => 
       switch (x)
       
         case Mode.ModuleA: this.router.navigateByUrl(`/$x/$internalRoute`); break
         case Mode.ModuleB: this.router.navigateByUrl(`/$x/$internalRoute`); break
         case Mode.ModuleC: this.router.navigateByUrl(`/$x/$internalRoute`); break
       
     )
 

【讨论】:

以上是关于如何根据条件加载角度模块的主要内容,如果未能解决你的问题,请参考以下文章

如何根据条件配置Angular 5中的app-routing.module来加载两个子路由模块中的一个或另一个?

如何从另一个组件返回到另一个组件而不以角度重新加载组件?

没有路由器的角度延迟加载模块

当所有路由根据条件动态加载时如何重定向到路由?

角度 5 延迟加载与动态加载

在角度翻译中使用自定义加载器的问题