Angular2 DI - 在同一构造函数中初始化多个不同的实例 [英] Angular2 DI - initializing multiple different instances in the same constructor

问题描述

我有一个Angular2 DI问题。说我有一个 TestService ，我想在同一个组件中使用这个服务的两个不同实例。如果我只是向组件添加一个提供者，并且将2个实例添加到构造函数中，我将得到相同的服务实例。例如：

TestService

 从@ angular / core导入{Injectable}; 
 
 @Injectable（）
 export class TestService {
 
 public id：number = Math.random（）; 
 
 public toString（）：string {
 returnId：+ this.id; 
} 
} 
  

测试组件来自@ angular / core的p>

  import {Component，Input，OnInit}; 
 import {TestService}来自../../services/test.service; 
 
 @Component（{
 providers：[TestService] 
}）
导出类TestComponent实现OnInit {
 
构造函数（private _testService1： TestService，private _testService2：TestService）{}; 
 
 ngOnInit（）{
 console.log（AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，this._testService1.toString（））; 
 console.log（BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB，this._testService2.toString（））; 
} 
} 
  

控制台中的结果 / p>

  AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Id：0.24242492129168425 
 BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB Id：0.24242492129168425 
   
 
 
提前感谢
解决方案
您可以注入一个工厂，每次调用它时返回一个新的实例：
  @NgModule（{
 provider：[{
提供：'testService'，
 useFactory：（/ * TestService在这里像`http` * /）=> 
（/ * params * /）= > new TestService（/ * http * /），
 deps：[/ * TestService在这里像'Http` * b 
 
 
 
 @Component（...）
导出类TestComponent实现OnInit {
 
 constructor（@Inject（'testService'）private _testServiceFactory）{}; 
 
 ngOnInit（）{
 console.log（AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA，this._testServiceFactory（/ * params * /）。toString（））; 
 console.log（BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB，this._testServiceFactory（）。toString（））; 
} 
} 
  
   Plunker示例  
（当您点击按钮时检查浏览器控制台中的输出） p> 
I have an Angular2 DI question. Say I have a TestService and I want to use 2 different instances of this service inside the same component. If I simply add a provider to the component and I add the 2 instances to the constructor I end up with the same service instance. For example:

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

@Injectable()
export class TestService {

    public id: number = Math.random();

    public toString(): string {
        return "Id: " + this.id;
    }
}
Test component
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());
    }
}
Result in console
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA Id: 0.24242492129168425
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB Id: 0.24242492129168425
Can someone pls tell me if there's a way to use Angular2's DI mechanism to inject multiple different instances of a service within the same component or should I just drop the DI for this particular case and create my instances manually with a manual constructor?

Thanks in advance
解决方案
You can inject a factory that returns a new instance every time you call it:
@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
(check the output in the browser console when you click the button)

                        
这篇关于Angular2 DI  - 在同一构造函数中初始化多个不同的实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！