使用组件和服务创建模块答案

【问题标题】：Create module with components AND services使用组件和服务创建模块
【发布时间】：2018-05-11 15:38:43
【问题描述】：

我目前正在开发 Ionic 3 应用程序。在这种情况下，我需要像 NgBootstrap 这样的手风琴组件，但 Ionic 框架不提供这样的组件。所以我决定自己实现一个，这对我来说是一个继续学习 Angular 5 的好机会。

为了澄清我的问题的上下文，你需要知道我的组件是通过这个文件树定义的：

components/
   my-accordion/
      my-accordion.component.html
      my-accordion.component.css
      my-accordion.component.ts
      my-accordion.service.ts

实际上，我需要一个特定的服务来允许我的组件的所有实例之间进行通信。因为当我打开手风琴的一个项目时，我希望另一个自动关闭，一次只能打开一个项目。我不知道这是否是正确的方法，但它似乎与 RxJS 库配合得很好。

无论如何，如您所见，我的手风琴的定义取决于一个组件和一个服务。没有这项服务，我的手风琴就无法正常工作。问题是我想把它放在一个模块中，我可以与其他应用程序共享以便能够重用我的手风琴。

我的第一个想法是把它放在SharedModule 中，但ngModules FAQs 明确表示：

SharedModule 不应该有提供者，原因已解释之前。它的任何进口或再出口的 NgModules 也不应该有提供者。

读完之后，我的第二个想法是把我的手风琴放在CoreModule，但文档再次明确地说：

考虑让 CoreModule 成为一个纯服务模块，没有声明。

因此我的问题是：如果我希望能够在其他 Ionic/Angular 应用程序中重用组件及其服务（用于兄弟通信），应该在哪里放置它？

【问题讨论】：

我认为在这种情况下你不应该使用服务。只需在组件中使用 javascript 即可。
其实我只是通过@Input注解实现了手风琴的item之间的通信，没有任何服务。但是根据我在 Angular 的官方文档上阅读的内容，正确的方法是创建一个 Feature module 并使用静态方法来定义模块及其导出的提供程序，以避免模块延迟加载时出现任何问题.
下面的文章很好地描述了如何实现这样的Feature module：angular-2-training-book.rangle.io/handout/modules/…

标签： angular typescript ionic3 angular-components angular5

【解决方案1】：

您无需重新发明轮子。有一个 Ionic accordion 组件，您可以在其中与 Ionic 3 应用程序一起使用。

这里是Ionic Accordion

问：

在哪里放置组件及其服务（用于兄弟通信）如果我希望能够在其他 Ionic/Angular 应用程序中重用它？

答：

Ionic 有一个非常简单的答案。您只需要使用此CLI ionic generate provider MyAccordion 创建一个provider。就是这样。

【讨论】：

感谢您的链接。确实我只在Ionic官方组件列表上搜索过，并没有任何accordion组件。但是回到我最初的问题，我应该将这样的组件与同级通信服务一起放在哪里？是否有任何指南可以创建包含组件和服务的模块？
请查看更新。
provider 只是将服务作为单例注入的一种机制，不是吗？
是的，是的。通常我们在app.module.ts 文件中声明它。