如何在Angular 2中创建单件服务？

Question

如何在Angular 2中创建单件服务？我已经读过，当引导应该让所有孩子共享同一个实例时注入，但我的主要和头部组件（主应用程序包括头部件和路由器出口）都获得了我的服务的单独实例。我有一个FacebookService，用于调用facebook javascript api和一个使用FacebookService的UserService。这是我的引导程序：bootstrap(MainAppComponent, [ROUTER_PROVIDERS, UserService, FacebookService]);从我的日志记录看起来，引导调用结束，然后我看到FacebookService然后在每个构造函数运行的代码，MainAppComponent，HeaderComponent和DefaultComponent之前创建UserService：

Answer 1

它是由依赖注入的工作方式引起的。它基于分层注入器。

Angular2应用程序中有几个注入器：

• 引导应用程序时配置的根目录

• 每个组件的注射器。如果您在另一个组件内使用组件。组件注入器是父组件1的子组件。应用程序组件（在您提升应用程序时指定的组件）将根注入器作为父注入器）。

当Angular2尝试在组件构造函数中注入某些内容时：

• 它会查看与组件关联的进样器。如果有匹配的，它将使用它来获取相应的实例。这个实例是懒惰创建的，是这个注入器的单例。

• 如果此级别没有提供者，它将查看父级注入器（依此类推）。

因此，如果您希望为整个应用程序提供单例，则需要在根注入器级别或应用程序组件注入器上定义提供程序。

但Angular2将从底部查看注入器树。这意味着将使用最低级别的提供程序，并且关联实例的范围将是此级别。

有关详细信息，请参阅此问题：

• 在角度2（Beta）中将一项服务注入另一项服务的最佳方法是什么？

Answer 2

我知道棱镜有分层注射器，如蒂埃里所说。

但是我在这里有另一种选择，以防你发现一个用例，你真的不想在父母那里注入它。

我们可以通过创建服务实例来实现这一点，并且提供始终返回的服务。

import { provide, Injectable } from '@angular/core';import { Http } from '@angular/core'; //Dummy example of dependencies@Injectable()export class YourService {
  private static instance: YourService = null;

  // Return the instance of the service
  public static getInstance(http: Http): YourService {
    if (YourService.instance === null) {
       YourService.instance = new YourService(http);
    }
    return YourService.instance;
  }

  constructor(private http: Http) {}}export const YOUR_SERVICE_PROVIDER = [
  provide(YourService, {
    deps: [Http],
    useFactory: (http: Http): YourService => {
      return YourService.getInstance(http);
    }
  })];

然后在您的组件上使用自定义提供方法。

@Component({
  providers: [YOUR_SERVICE_PROVIDER]})

你应该有一个单独的服务，而不依赖于分层注入器。

我不是说这是一种更好的方法，以防万一有人出现无法进行分层注射器的问题。