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

How to lazy load modals in Angular 7 module setup

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

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

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

效果很好...

问题是当我们进入 modals 时弹出页面。

注意:我将 "modal" 加粗,以免与 "module".

混淆

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

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

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

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

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

经常会出现"core"components模块到处导入的情况,但问题是其他一些开发人员可能会在那里添加组件,因为它们在多个页面中使用,但这样会导致那些在十个或更多页面中导入组件,即使这些页面仅使用该模块中的一个或两个组件。

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