如何在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]})你应该有一个单独的服务，而不依赖于分层注入器。我不是说这是一种更好的方法，以防万一有人出现无法进行分层注射器的问题。