构造函数外部的Angular 2注入依赖项 [英] Angular 2 Inject Dependency outside Constructor

问题描述

我目前正在研究Angular 2中的DI.我正在使用针对具体数据类型的通用子类型实现REST-Client，如下所示:

class RESTClient<T>{
    constructor() {
        var inj =  ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
        this.http = inj.get(Http);
        this.conf = RESTConfiguration;
    }
}
class BookClient extends RESTClient<Book>{      
    constructor(){
        // since I dont want to inject the HTTP Providers here, I'm using a custom    injector in the super class
        super();
    }
}

class WriterClient extends RESTClient<Writer>{      
    ...
    ...
}

据我了解，超类REST-Service注入的所有RESTClient之间将共享一个http服务.

现在，我想拥有一个RESTConfiguration类:

@Injectable()
export class RESTConfiguration {
    get baseURL() {
     return this._baseURL;
    }

    set baseURL(value) {
        alert("sets value to"+value);
        this._baseURL = value;
    }

    private _baseURL;

}

应在主应用中将其配置如下:

initializeApp(){
  this.restconf.baseURL = "http://localhost:3004/";
}
bootstrap(MyApp, [RESTConfiguration]).then();

我现在想知道如何将我的RESTConfiguration的一个单例实例注入RESTService类，而不将其传递给我想保持无参数的构造函数，以减少代码重复并避免打字稿中的泛型问题./p>

在上面的示例(第一个代码段)中，我尝试使用我创建的ReflectiveInjector注入配置，该配置为我提供了我的Configuration的自定义实例.

我考虑了几种解决方案:

1. 通过使用服务或某些静态类属性使应用程序可用，从而访问Apps的全局注射器"

2. 在我的配置中添加额外的单例逻辑

3. 在构造函数之外找到一种使用角度本机注入方法的方法吗?

我的思维中是否存在错误，或者我滥用了DI框架?

解决方案

这应该为该问题提供解决方案，但在需要注入服务而又不将其作为构造函数参数提供的任何情况下都可以提供帮助.

我在另一篇文章中看到了这个答案: 存储要在组件中使用的注射器实例

您可以在AppModule类中配置Angular Injector，然后在其他任何类中使用它(您可以从任何类访问AppModule的成员).

在AppModule中添加:

export class AppModule { 
  /**
     * Allows for retrieving singletons using `AppModule.injector.get(MyService)`
     * This is good to prevent injecting the service as constructor parameter.
     */
    static injector: Injector;
    constructor(injector: Injector) {
        AppModule.injector = injector;
    }
}

然后在另一个类中，您可以执行以下操作(对于此问题，将MyService替换为Http):

@Injectable()
export class MyClass{
    private myService;

    constructor(){
        this.myService = AppModule.injector.get(MyService);
    }
}

这等同于使用:

constructor(private myService: MyService){}

I am currently digging into DI in Angular 2. I'm implementing a REST-Client using a generic subtypes for concrete Datatypes like this:

class RESTClient<T>{
    constructor() {
        var inj =  ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
        this.http = inj.get(Http);
        this.conf = RESTConfiguration;
    }
}
class BookClient extends RESTClient<Book>{      
    constructor(){
        // since I dont want to inject the HTTP Providers here, I'm using a custom    injector in the super class
        super();
    }
}

class WriterClient extends RESTClient<Writer>{      
    ...
    ...
}

So as I understand, there will be one http service shared between all RESTClients injected by the superclasses REST-Service.

Now I want to have a RESTConfiguration class as such:

@Injectable()
export class RESTConfiguration {
    get baseURL() {
     return this._baseURL;
    }

    set baseURL(value) {
        alert("sets value to"+value);
        this._baseURL = value;
    }

    private _baseURL;

}

It should be configured in the main app as such:

initializeApp(){
  this.restconf.baseURL = "http://localhost:3004/";
}
bootstrap(MyApp, [RESTConfiguration]).then();

I'm now wondering how to inject one singleton instance of my RESTConfiguration into the RESTService class without passing it to the constructor which I want to remain argument-less in order to reduce code duplication and avoid issues with generics in typescript.

In the above example (first code snippet) I'm trying to inject my configuration using the ReflectiveInjector I created which delivers me a custom instance of my Configuration.

I thought about several solutions:

1. Getting access to the Apps "global injector" by making one available using a service or some static class property

2. Implementing extra singleton-logic into my configuration

3. finding a way to use the angular-native injection method outside of the constructor?

Are there mistakes in my thinking or am I misusing the DI framework ?

解决方案

This should provide a solution for this issue but also help in any case where one needs to inject a service without supplying it as a constructor parameter.

I saw this answer in another post: Storing injector instance for use in components

You can configure the Angular Injector in your AppModule class, and then use it in any other class (you can access AppModule's members from any class).

In AppModule add:

export class AppModule { 
  /**
     * Allows for retrieving singletons using `AppModule.injector.get(MyService)`
     * This is good to prevent injecting the service as constructor parameter.
     */
    static injector: Injector;
    constructor(injector: Injector) {
        AppModule.injector = injector;
    }
}

Then in your other class you can do the following (for this question replace MyService with Http):

@Injectable()
export class MyClass{
    private myService;

    constructor(){
        this.myService = AppModule.injector.get(MyService);
    }
}

This would be equivalent to using:

constructor(private myService: MyService){}

这篇关于构造函数外部的Angular 2注入依赖项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！