Angular 模块——通过延迟加载重用来自域模块的共享组件的最佳实践答案

【问题标题】：Angular modules - best practises of reusing shared components from domain modules with lazy loadingAngular 模块——通过延迟加载重用来自域模块的共享组件的最佳实践
【发布时间】：2020-08-05 16:05:32
【问题描述】：

我知道延迟加载和共享模块的概念，但我不确定在我的应用程序中将代码分成模块的最佳做法是什么。我有 4 页：

仪表板
饮料
饮品食谱
酒吧

所以我将我的应用程序划分为 4 个逻辑域模块：DashboardModule、DrinksModule、RecipesModule、BarsModule。在编码时，我注意到模块之间存在一些依赖关系：

DashboardModule 重用了所有其他模块中的一些组件。
BarsModule 和 RecipesModule 重用来自 DrinksModule 的一些组件

所以我看到的问题是：

DashboardModule 必须加载所有其他模块，但只使用一些组件。
DrinksModule 总是被加载，但只有一些组件在其他模块中使用。

我不想将所有重复使用的组件移动到单个 SharedModule，因为这些组件适合特定域（如酒吧或饮料），而且某些组件将被不必要地加载。

拆分DrinksModule 和SharedDrinksModule 等域模块是否有意义，最好的项目结构是什么？或者也许有更好的做法来处理这些问题？

【问题讨论】：

标签： angular lazy-loading ng-modules

【解决方案1】：

最好的选择是创建一个 sharedModule 并将 resuble 组件移动到该模块。还要确保将这些组件作为转储组件。

【讨论】：

我不确定这个解决方案。假设我有 DrinkPreviewComponent，它用于一些 DrinksModule 组件，但也用于仪表板。我想在 DrinksModule/DrinksSharedModule 中有这个组件，因为它符合域上下文。我认为 SharedModule 应该更适合一些通用组件、助手和实用程序。
如果是dump组件，可以放到共享模块中。从某种意义上说，转储组件没有任何依赖关系。您只需要传递输入，它将根据您的输入显示视图。例如星级组件，在这种情况下，我们只需将计数从 1 传递到 5，它将根据计数显示开始。