混淆 Angular 2+ 模块、导出和服务 - 如何避免共享/可重用服务的多个实例答案

【问题标题】：Confusing Angular 2+ modules, exports and services - how to avoid multiple instances of shared/reusable service混淆 Angular 2+ 模块、导出和服务 - 如何避免共享/可重用服务的多个实例
【发布时间】：2017-06-11 02:22:40
【问题描述】：

鉴于我导入到我的主应用程序模块 (BrowserModule) 中的 import { HttpModule } from '@angular/http';，并且鉴于在应用程序中我在各处执行 Http 服务的 DI，如果发生以下情况会发生什么：

我使用其他一些模块，例如我创建了一个功能模块或者我已经下载了 npm 包，我们称之为CoolFeaturesModule
CoolFeaturesModule 本身正在导入 HttpModule 并注入 Http 服务

据我研究，每个模块都有自己的注入器，每个注入器都会注册一个Http 服务提供者。因此，我将拥有多个 Http 服务实例。那是对的吗？

【问题讨论】：

不，不正确。服务默认是单例的。一旦你使用了一个可注入对象，DI 就会为下次使用保留相同的实例。
嗯，这个引用来自：medium.com/@cyrilletuzi/…Most importantly, do not mix components/directives/pipes and services in the same module. Why? 以及该引用之后的段落。
好吧，如果模块是同级的，它们可以产生多个可注入实例，因为 DI 在树中找不到服务。您可以为此使用共享模块。拥有一个导入 Http 服务的模块，然后在需要该服务时使用该模块。因此，您的同一个服务实例将在任何地方使用。
Angular 2 injector hierarchy and NgModule的可能重复

标签： angular angular2-services

【解决方案1】：

会有多个基于angular.io docs的服务实例

依赖是注入器范围内的单例。一个应用程序可能有多个注入器。 Angular 应用程序是一个组件树。每个组件实例都有自己的注入器。这组件树与注入器树平行。

【讨论】：

【解决方案2】：

如前所述，只有在依赖注入树中可用时，injetable 才是单例的。当使用注入时，组件首先检查它的依赖数组，如果找到，它会使用它。如果不是，它会爬到上层树直到 AppModule。在这种情况下，如您所见，如果组件/模块是兄弟姐妹（或者不只是以某种方式相互继承）并且如果它们提供自己的 HttpService，它们将分别初始化它。

但是，如果您不使用延迟加载，您的所有服务都将在您的主模块中被识别。因此，无论如何，您的服务将是全局的，因此是单例的。

https://plnkr.co/edit/JpEDf1pxO95knVUQLwdE?p=preview

 import {Component, NgModule, VERSION,Injectable} from '@angular/core'
    import {BrowserModule} from '@angular/platform-browser'
    import {HttpModule,Http} from "@angular/http";

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }
}


@Injectable() 
export class CustomHttpService{
  constructor(protected http: Http){

  }
}

@NgModule({
  imports:[HttpModule]
  providers:[CustomHttpService]
})
export class CustomHttpModule{}



@NgModule({
  imports: [ BrowserModule,CustomHttpModule],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

【讨论】：