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

Question

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

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

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

这很好用...

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

注意：我将把“modal”这个词加粗，以免与“module”混淆。

组件上的按钮可能会弹出一个modal。所以组件需要导入modal模块。该模式需要访问组件，以便它进口的组件模块。这会导致循环依赖。

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

Answer 1

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

\n\n

\n

I\xe2\x80\x99m 正在争论是采用该解决方案还是只为每个组件提供它\xe2\x80\x99s 自己的模块，并且只将 I\xe2\x80\x99m 实际使用的组件导入到每个其他组件/页面/模式中杀死循环依赖。也许有一个 \xe2\x80\x9ccore\xe2\x80\x9d 组件模块来处理所有不\xe2\x80\x99t 有许多依赖项的基本事物

\n

\n\n

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

\n\n

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

\n\n

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

\n