Angular2：无路由的延迟加载和动态加载

Posted 2023-02-22

【中文标题】Angular2：无路由的延迟加载和动态加载

【英文标题】：Angular2: Lazy Loading without Routing and Dynamic Loading

【发布时间】：2017-02-26 00:57:08

【问题描述】：

我正在为我的项目使用 mgechev 的 angular2 种子。我在 Angular2 上工作了 6 个月（跟随世界所有 RC 到最终版本）。我被客户的要求所困扰。希望大家帮忙。

这就是问题所在。基于用户角色：

ROLE_ADMIN

ROLE_REVIEWER

Web 应用程序应该能够加载特定模块并显示。说，

如果用户角色是ROLE_ADMIN 然后加载angular2 模块Module1 & Module2 如果用户角色是ROLE_REVIEWER，则加载angular2模块 仅限Module1。

当我说加载时，它意味着它必须从服务器获取模块文件（与模块捆绑的所有内容），注入 Angular2 应用程序并显示该模块。

因此，如果用户角色是ROLE_REVIEWER，我将只能看到Module1，这意味着甚至不应该从服务器获取Module2。

编辑 这是困难的部分，执行此操作时不会更改 url。将此模块视为加载到您的仪表板上的小部件/dashboard。因此，在加载这些模块时不会更改 url。

希望我的问题足以说明问题。请建议我应该做什么或研究或学习以实现这一目标。

我的最佳猜测是，我必须执行以下操作：

有条件的延迟加载（无路由）然后， 动态加载

但我不知道怎么做。

【问题讨论】：

你找到这个问题的答案了吗？我也有同样的问题。

我现在知道它将如何工作，但我无法成功地制作原型。

我使用了这个链接，我从那里得到了这个想法：github.com/mgechev/angular-seed/issues/1358

***.com/questions/40293240/…

【参考方案1】：

您需要使用路由和延迟加载。 我使用的策略是根据角色动态配置路由器。 我希望这会有所帮助

阅读您的编辑后

阅读您的编辑后，我的理解是，使用“模块”一词，您可以识别出一系列根据角色显示或不显示的小部件。在这种情况下，您不需要路由和延迟加载。这只是一些条件逻辑，您可以使用 *ngIf 在“仪表板”组件的模板中进行编码。

我建议不要在这个意义上使用“模块”这个词。模块用于 EC6 意义或 Angular2 意义。 在第一种情况下，它与“导入”/“导出”概念有关。在第二种情况下，它与延迟加载和路由有关。

希望对你有帮助

【讨论】：

嗨 @Picci 网址在加载这些模块时不会更改。我修改了我的问题。请看一看。

【参考方案2】：

将 ROLE 作为全局变量 在延迟加载中有条件解析

path: "dashboard", loadChildren: () => new Promise(function (resolve) (require as any).ensure([], function (require: any) if (ROLE === 'admin') resolve(require('./admin.module')['AdminModule']); if (ROLE === 'reviewer') resolve(require('./reviewer.module')['ReviewerModule']); resolve(require('./user.module')['UserModule']); //default module ); )

将 module1 和 module2 导入 ADMIN 模块并将 module1 导入 ReviewerModule

【参考方案3】：

在这种情况下，路由不必参与延迟加载模块，您应该使用动态组件来实现这一点，使您的组件作为入口组件并基于角色解析和显示这些组件。 https://angular.io/guide/dynamic-component-loader