另一个服务中的 Angular2 注入(inject)服务创建 2 个实例

Question

我有两个服务:AuthService 和 MonBanquetService，AuthService 依赖于 MyService。这是这两个服务的基本代码:

AuthService.ts:

import {Inject, Injectable} from 'angular2/core';
import {MonBanquetService} from '../monbanquet.service'

@Injectable()
export class AuthService {

    public username: string;

    constructor(protected _monBanquetService: MonBanquetService) {
        // do something()
    }

}

MonBanquetService.ts

import {Injectable, Component} from 'angular2/core';
import {Http, Headers, Response} from 'angular2/http';
import {Router} from 'angular2/router';

@Injectable()
export class MonBanquetService {

    constructor(public http: Http, private _router: Router) {
        console.log('MonBanquetServices created');
    }
}

我将这两个服务作为提供者放在 boot.ts 中:

bootstrap(AppComponent, [
    ROUTER_PROVIDERS,
    provide(LocationStrategy, {useClass: HashLocationStrategy}),
    HTTP_PROVIDERS,
    MonBanquetService,
    AuthService
]);

但是，当我运行该应用程序时，我看到两个控制台日志“已创建 MonBanquetServices”。 我以为服务应该是单例的，怎么会有两个实例？

谢谢。

Answer 1

Angular 为每个提供者维护一个实例。如果您在多个位置添加一个类型作为提供者，则会导致多个实例。

当从 DI 请求一个键(类型、 token )时，它会查找层次结构并返回它找到的第一个提供者的实例。

因此，如果你想要一个全局实例，只需将它添加到

的提供者列表中

<罢工>

<罢工>

bootstrap(AppComponent, [MonBanquetService])

<罢工>

@NgModule(
  providers: [MonBanquetService],
  ....
)
export class AppMpdule{}

<罢工> 或者按照 Angular 团队的建议，将自定义提供程序添加到根组件的提供程序列表中

@Component({
  selector: 'my-app',
  providers: [MonBanquetService]
})
class AppComponent {
}

<罢工>