如何在Typescript类中创建Angular 5 HttpClient实例

Question

I'm writing a base class which contains the httpClient. It is used to make REST api calls. The httpClient variable is set correctly if defined in constructor, but not in private variable.

Here's my sample code:

@Injectable()
export class MyBaseClass implements {
  private httpClient = HttpClient

  constructor(
    private httpClient2: HttpClient
  ) {
    console.log("httpClient2", httpClient2)
    console.log("httpClient2.get", httpClient2.get)
  }
  callApi() {
    console.log("httpClient", this.httpClient)
    console.log("httpClient.get", this.httpClient.get)
  }
}

constructor output:

callApi output:

As you can see the two variables aren't the same and the get property of httpClient is undefined.

I would use the variable in the constructor throughout my class, but I what I want is to extend this class and having the variable in the constructor isn't convenient.

Any help/suggestions would be greatly appreciated.

Thanks,

Will

Answer 1

There is another option if you really don't want to inject the services in your base class' constructor.

1. Declare a global variable containing a ref to the injector and assign it in your module (or somewhere else, before your base class'constructor is called)

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

export let InjectorInstance: Injector;

export class AppModule 
{
  constructor(private injector: Injector) 
  {
    InjectorInstance = this.injector;
  }
}

2 Then you can use it like this in your base class

import {InjectorInstance} from '../app.module';

export class MyBaseClass  
{
    private httpClient : HttpClient:

    constructor()
    {
        this.httpClient = InjectorInstance.get<HttpClient>(HttpClient);
    }

}

Answer 2

The property httpClient on your class is simply being set to the HttpClient class constructor. If you need an instance of that class, you need to let Angular provide it to you via dependency injection like your httpClient2 property (ie as a parameter to your constructor).

As a note, adding the private accessor to the parameter on the constructor is syntactic sugar that is doing the following:

class MyBaseClass {
    private httpClient2: HttpClient;

    constructor(httpClient2: HttpClient) {
        this.httpClient2 = httpClient2;
    }
}