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

Question

我正在为我的项目使用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更改。

希望我的问题足够解释。 请建议我应该做什么或研究或研究以实现这一目标。

我最好的猜测，我必须做以下事情：

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

但是我不知道怎么做。

Answer 1

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

阅读您的编辑后

阅读完编辑后，我的理解是，使用“模块”一词，您可以根据角色确定一系列不同的小部件。 在这种情况下，您不需要路由和延迟加载。 您可以使用* ngIf在“仪表板”组件的模板中编写一些条件逻辑。

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

我希望这有帮助

Answer 2

1. 将ROLE作为全局变量
2. 在延迟加载中有条件解决

{ 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 }); }) }

3. 将module1和module2导入ADMIN模块，将module1导入ReviewerModule

Answer 3

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