Angular 2 inject service into extended class(BaseRequestOptions)

问题

I have the following code that extends the BaseRequestOptions class:

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

@Injectable()
export class AppRequestOptions extends BaseRequestOptions {
    constructor(private serviceA:ServiceA) {       
        super();        
    }   
    merge(options?: RequestOptionsArgs): RequestOptions {        
        console.log(this.serviceA);
        //this.serviceA.myCustomMethod();
        return super.merge(options);
    }
}

When I reference this.serviceA the value is undefined. When I inject the same service into other services/components it is working as expected.

Here is the complete bootstrap code:

import { Injectable } from '@angular/core';
import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { APP_ROUTER_PROVIDERS  } from './routes';
import { HTTP_PROVIDERS, BaseRequestOptions, RequestOptions, RequestOptionsArgs, Headers } from '@angular/http';
import { ServiceA } from './ServiceA';

@Injectable()
export class AppRequestOptions extends BaseRequestOptions {
    constructor(private serviceA:ServiceA) {       
        super();        
    }   
    merge(options?: RequestOptionsArgs): RequestOptions {        
        console.log(this.serviceA);
        //this.serviceA.myCustomMethod();
        return super.merge(options);
    }
}

bootstrap(AppComponent, [
    APP_ROUTER_PROVIDERS,
    HTTP_PROVIDERS,  
    ServiceA,
    { provide: RequestOptions, useClass: AppRequestOptions }
]).catch(err => console.error(err));

ServiceA declaretion:

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

@Injectable()
export class ServiceA {
    myCustomMethod() {

    }
}

I am using Angular version 2.0.0-rc.4

I am not sure if it is because I am extending a class and marking it as @Injectable() ?

I have checked and the only related questions I can find are:

Inject service inside a service inside a service in my Angular 2 application

Angular 2: Inject Service to another service. (No provider error)

UPDATE

Seems like it is related to a open bug : https://github.com/angular/angular/issues/8925

回答1:

There is an open bug for this: https://github.com/angular/angular/issues/9758.

Whereas the metadata for dependency injection is correctly set, the element isn't provided to the class instance at the constructor level.

@Injectable()
export class AppRequestOptions extends BaseRequestOptions {
  constructor(private serviceA:ServiceA) {       
    super();        
    console.log(Reflect.getMetadata('design:paramtypes', AppRequestOptions));
    console.log(Reflect.getMetadata('parameters', AppRequestOptions));
  }

  (...)
}

See this plunkr for more details: https://plnkr.co/edit/hcqAfsI7u88jbjScq6m3?p=preview.

Edit

It will work if you use the RequestOptions class instead of the BaseRequestOptions one:

@Injectable()
export class AppRequestOptions extends RequestOptions {
  constructor(private serviceA:ServiceA) {       
    super();        
  }   

  (...)
}

See this plunkr: https://plnkr.co/edit/laP04kqUCOR5qbFgo0iM?p=preview.

回答2:

This is very similar to the question I answered here: Injected dependency is undefined when extending BaseRequestOptions

When defining your provider also define the dependencies needed, so the object in your providers definition would look like:

{
 provide: RequestOptions,
 useClass: AppRequestOptions,
 deps: [ServiceA]
}

来源：https://stackoverflow.com/questions/38436658/angular-2-inject-service-into-extended-classbaserequestoptions

标签

typescript

dependency-injection

angular