Angular2 DI - 在同一个构造函数中初始化多个不同的实例

Question

我有一个 Angular2 DI 问题。假设我有一个TestService，并且我想在同一个组件中使用此服务的 2 个不同实例。如果我只是向组件添加一个提供程序，然后将 2 个实例添加到构造函数，我最终会得到相同的服务实例。例如：

测试服务

import {Injectable} from "@angular/core";

@Injectable()
export class TestService {

    public id: number = Math.random();

    public toString(): string {
        return "Id: " + this.id;
    }
}

测试组件

import {Component, Input, OnInit} from "@angular/core";
import {TestService} from "../../services/test.service";

@Component({
    providers: [TestService]
})
export class TestComponent implements OnInit {

    constructor(private _testService1: TestService, private _testService2: TestService) { };

    ngOnInit() {
        console.log("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", this._testService1.toString());
        console.log("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB", this._testService2.toString());
    }
}

控制台中的结果

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Id: 0.24242492129168425
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB Id: 0.24242492129168425

谁能告诉我是否有办法使用 Angular2 的 DI 机制在同一个组件中注入多个不同的服务实例，或者我应该为这种特殊情况删除 DI 并使用手动构造函数手动创建我的实例？

提前致谢

Answer 1

鉴于实例数量有限，直接的方法可能是：

@Component({
    providers: [
        { provide: 'TestService1', useClass: TestService },
        { provide: 'TestService2', useClass: TestService }
    ]
})
export class TestComponent implements OnInit {
    constructor(
        @Inject('TestService1') private _testService1: TestService,
        @Inject('TestService2') private _testService2: TestService
    ) {}
    ...
}

或OpaqueToken 对应以避免覆盖具有相同字符串标识符的服务：

export const TestService1 = new OpaqueToken;
export const TestService2 = new OpaqueToken;

...
providers: [
    { provide: TestService1, useClass: TestService },
    { provide: TestService2, useClass: TestService }
]
...
constructor(
    @Inject(TestService1) private _testService1: TestService,
    @Inject(TestService2) private _testService2: TestService
) {}

TestService 构造函数中的 DI 不会受到伤害。并保持TestComponent 的可测试性相同，两个服务实例都可以独立模拟。

Answer 2

你可以注入一个每次调用它都会返回一个新实例的工厂：

@NgModule({
   providers: [{
      provide: 'testService', 
      useFactory: (/* TestService deps here like `http`*/) => 
        (/* params */) => new TestService(/* http */), 
      deps: [/* TestService deps here like `Http`*/ ]
    }]
})


@Component(...)
export class TestComponent implements OnInit {

    constructor(@Inject('testService') private _testServiceFactory) { };

    ngOnInit() {
        console.log("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", this._testServiceFactory( /* params */).toString());
        console.log("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB", this._testServiceFactory().toString());
    }
}

Plunker example （单击按钮时检查浏览器控制台中的输出）

Answer 3

我将创建一个在服务中返回新实例的静态方法，并通过组件中的 DI 仅将其注入一个。比如：

import {Injectable} from "@angular/core";

@Injectable()
export class TestService {

    public id: number = Math.random();

    public toString(): string {
        return "Id: " + this.id;
    }
    static init() {
      return new TestService();
    }
}

然后在组件中：

import {Component, Input, OnInit} from "@angular/core";
import {TestService} from "../../services/test.service";

@Component({
    providers: [TestService]
})
export class TestComponent implements OnInit {
    _testService1: TestService;
    _testService2: TestService;

    constructor(_testFactory: TestService) { 
       this._testService1 = _testFactory.init();
       this._testService2 = _testFactory.init();
    };

    ngOnInit() {
        console.log("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA", this._testService1.toString());
        console.log("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB", this._testService2.toString());
    }
}