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

Question

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

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

ROLE_ADMIN

ROLE_REVIEWER

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

• 如果用户角色为ROLE_ADMIN，则加载angular2模块Module1＆amp; Module2
• 如果用户角色为ROLE_REVIEWER，则加载angular2模块 仅Module1。

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

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

修改 这是困难的部分，url在执行时不会更改。将此模块视为在仪表板/dashboard上加载的小部件。因此，在加载这些模块时，不会发生任何URL更改。

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

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

• 条件延迟加载（无路由）＆amp;然后，
• 动态加载

但我不知道如何。

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

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

Answer 3

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