如何在Angular 7模块设置中延迟加载模态

Question

在我之前的项目中，我们使用了一个大的“app模块”，它在应用程序的开头导入了所有内容（组件，管道，指令，页面）。

这显然不是最好的结构，因为随着应用程序的增长，它变慢。

我们最近使用Ionic 4切换到Angular 7，并且在路由上设置了延迟加载，现在每个页面都有一个模块。 页面模块导入组件模块

这很棒......

问题是当我们进入页面弹出的模态时。

注意：我要加粗“模态”这个词，以免与“模块”混淆。

组件上的按钮可以弹出一个模态 。 因此组件需要导入模态模块。 模态需要访问组件，以便导入组件模块。 这会导致循环依赖。

在延迟加载的模块化设置中导入模态的正确方法是什么？

Answer 1

我想有多种方法可以避免这种循环依赖问题，具体取决于你的特定项目，但有一种方法可能如下： 该组件可以告诉父页面实际打开模态，而不是打开模态的组件。 （通过在单击按钮时向父页面发出事件）。 这样，父页面将导入模态模块（例如，如果父页面是宠物列表并且模态显示每个宠物的详细信息，那么在应用程序的上下文中也可能有意义）。

我正在讨论使用该解决方案或只是为每个组件提供它自己的模块，并且只将我实际使用的组件导入到每个其他组件/页面/模式中以消除循环依赖关系。 也许有一个“核心”组件模块，用于所有没有很多依赖关系的基本事物

我很高兴您提到了这种方法，因为这正是我喜欢在我工作的项目中所做的事情。 我通常更喜欢每个组件都有自己的模块来控制每个页面上导入的组件 。

通常情况下，会有一个“核心”组件模块被导入到任何地方，但问题是其他一些开发人员可能会在那里添加组件，因为它们在多个页面中使用，但这会导致这些组件被导入十个或更多页面，即使这些页面仅使用该模块中的一个或两个组件。

这取决于您的项目有多大，有多少组件以及其他页面导入的频率，但在谈论移动应用程序（特别是混合移动应用程序）时，我认为最重要的是能够加载页面尽可能快，因此只导入每个页面实际需要的组件听起来像是正确的方式。