angular - 如何在 Angular 7 模块设置中延迟加载模式

Question

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

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

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

这很好用...

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

注意:我要将 “模态” 加粗，以免与“模块”混淆。

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

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

Answer 1

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

I’m debating between going with that solution or just giving every component it’s own module and only importing the components I’m actually using into each other component/page/modal to kill the circular dependency. Maybe having a “core” components module for all the basic things that don’t have many dependencies

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

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

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