由于页面之间的导航，Angular2/Ionic2 循环依赖模块答案

【问题标题】：Angular2/Ionic2 circular dependent modules because of navigation between pages由于页面之间的导航，Angular2/Ionic2 循环依赖模块
【发布时间】：2017-07-05 20:11:10
【问题描述】：

我正在重构我的项目以匹配 https://angular.io/guide/styleguide 的 Angular2 样式指南。起初我只有一个模块，所以没有问题。现在，在重构和拆分为模块时，由于不同模块页面之间的导航，我得到了循环依赖。

简单来说，我有三个模块，每个模块都有组件：

共享
- BookListItemComponent
- AjaxSpinner 组件
- FormHelperComponent
- ...
书籍
- 图书组件
商店
- 商店列表组件

模块Books 和Shops 分别导入Shared。 BookListItemComponent 会显示书名，点击后会导航到显示书名的BookComponent。

ShopListComponent 显示的是某个商店的图书列表。

由于Books 模块导入Shared 模块以使用微调器等。这会产生循环依赖。我们应该如何解决这个问题？

在应用程序中，您可以在不同模块的页面之间导航。我没有办法避免让这些相互指向。尤其是在整个应用程序中用于列出书籍的 BookListItemComponent。

我也看过：

但无法真正将其映射到我的问题。

【问题讨论】：

ShopListComponent 显示某个商店的书籍列表。这会在商店和书单和书单之间建立关系，因此这两个模块就像混合在一起，所以我想您需要有一个通用模块才能实现此功能，即书和商店都将用于连接到书单项目组件.这可能会解决问题
问题是它发生在整个应用程序中，因为页面在商店、书籍、卖家等之间相互链接。那么唯一的方法就是创建一个模块。我也在考虑共享导航服务之类的东西。还阅读了有关 forwardRef 的信息，但没有看到这将如何解决我的问题。
我同意@RahulSingh，如果它是一个通用功能，它应该被移到一个通用模块（又名共享）。这个想法是 FeatureModule 不相互交谈，而是使用 CommonModule。此外，它与您所做的设计决策、如何设计组件以使其可重用有关。基本上你解决了模块之间没有依赖关系的循环依赖问题，并将公共依赖集中在一个新模块中。
我明白了，给定的例子是一个简化版本。在真正的应用程序中，我有 40 多个组件和大约 12 个模块。所以基本上这意味着我必须对所有可以展示一本书的组件进行分组。这意味着几乎每个模块，因为该应用程序以书籍为中心。考虑前 100 本书、您附近销售的书籍列表、详细视图列出其书籍的出版商列表
不完全一样，只是切断了双向依赖，你可以拥有你的 book 模块并按原样使用它，只是不要让模块依赖于另一个模块，你可以移动所有的book 依赖项从共享模块到您的 book 模块，或者您可以将所有内容移动到共享模块。这里的重点是：不要创建循环依赖。您可以通过做出良好的设计决策来避免循环依赖，以这样的方式构建您的模块，使模块不需要依赖于其依赖项。

标签： angular ionic2

【解决方案1】：

所以我感受到了重构所有代码的痛苦。我们在工作中使用我们的一个应用程序也经历了同样的事情，这很痛苦。不过在它的背面，非常值得！ ionic 建议您组织文件的方式是不可持续的。基于经历相同的事情，我有几个想法和想法可能会帮助你。

首先，将所有内容放回同一个模块中并不是最好的主意，因为这样你就会回到你开始的地方，因为 ionic 会让你这样做，而不是像 Angular 建议的那样有组织的代码。总的来说，Angular 提出了一些很棒的模式，我认为让你的代码符合他们的建议是值得的。

其次，这是重点，您是否在应用中使用深层链接？如果你是，那么你可以通过深度链接获得一个很棒的、几乎没有文档记录的功能，以避免页面内的循环依赖。假设您有一个包含以下深层链接配置的页面：

{
  component: MyCoolPage, // the page component class
  name: 'MyCoolPage',    // I use the name of the class but can be any sting you want
  segment: 'cool-page'   // optional, not related to the problem,
                         // but it's probably best to use this field as well
}

当您想要导航到MyCoolPage 时，您现在可以使用navCtrl.push('MyCoolPage') // or whatever string name you gave the page 而不是navCtrl.push(MyCoolPage)。因此，现在您正在通过字符串名称导航到页面，这样就无需在您想要导航到页面时导入页面。这个功能从 ionic 2 开始就存在了，虽然我直到更新到 ionic 3 才意识到你可以做到这一点。

第三，设计考虑比其他任何事情都重要，您可能需要重新考虑从组件内导航到页面。通常我们所做的是将事件发送到父页面组件，然后让页面组件处理推送或弹出导航堆栈。你的BookListItemComponent 不应该给你带来问题。如果这是在整个应用程序中使用的共享模块中的内容，那么它不应该依赖于其他模块。除了需要导入的 ionic 和 angular 模块之外，您的共享模块不应依赖于其他任何模块。

【讨论】：

感谢您的评论，但看起来我正在使用不同的方式进行深度链接：this.deeplinks.route({ '/en/book/:deeplinkBookSlug': Book, '/nl/book/:deeplinkBookSlug': Book, });
Well Ionic 2 文档建议在您的应用模块 ionicframework.com/docs/2.3.0/api/navigation/DeepLinker 中定义深度链接。如果你这样做，那么你可以为每个页面提供一个字符串名称，以及映射到该页面的 url 段，然后你可以解决你的循环依赖问题。