库提供的 Angular 模块中的服务和组件的方法答案

【问题标题】：Approaches to services and components in Angular modules provided by libraries库提供的 Angular 模块中的服务和组件的方法
【发布时间】：2017-12-11 04:47:55
【问题描述】：

我以为我了解 Angular 模块，但在找出构建涉及由库提供的服务和组件的模块的最佳方法时遇到了麻烦。

该库实现了一个NotificationsComponent，它依赖于一个NotificationsService，它需要是一个单例，因为它保留了通知信息。消费者希望在各个页面中使用NotificationsComponent，其中一些在AdminPagesModules 内，而另一些在BookPagesModule 内。

假设在库中我定义了一个NotificationsModule，它“声明”并且 “出口”NotificationsComponent，并“提供”NotificationsService。现在，如果我将此模块导入AdminPagesModule 和BookPagesModules，以便这些模块中的页面可以使用NotificationComponent，我会得到NotificationsService 的单独实例，这将不起作用。另一方面，如果我在我的AppModule 中导入NotificationsModule，我成功确保NotificationsService 是整个应用程序中使用的单例，但我看不到NotificationsComponent 在各个功能模块内的组件中，例如AdminPagesModule.

我见过一种模式，其中一个模块导入另一个模块，然后重新导出它。在这种情况下，我们将在AppModule 中导入NotificationsModule，然后重新导出它，然后在AdminPagesModule 中再次导入NotificationsModule。在这种情况下，NotificationsService 是否会像我想要的那样在整个应用程序中成为单例，但 NotificationsComponent 仍可用于AdminPagesModule 内的组件？

或者是否有解决这个问题的方法涉及SharedModule 模式？

【问题讨论】：

标签： angular angular2-modules

【解决方案1】：

最好将单例服务放在单独的 ts 文件中，并在 AppModule 或 SharedModule 中导入/提供一次且仅一次，而不是组件模块（例如库）。在导入 AppModule 的模块中声明的组件将在整个应用的模板中可用，无需重新声明或导出。

另见https://stackoverflow.com/a/39665993/3103979

SharedModule 中提供的服务示例：

export class SharedModule {
  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [
        ...
        ApiService,
        Auth,
        ...
      ]
    };
  }
}

【讨论】：