如何在Typescript類中創建Angular 5 HttpClient實例

Question

我正在寫一個包含httpClient的基類。 它用於進行REST api調用。 如果在構造函數中定義了httpClient變量，則設置正確，但在私有變量中則未設置。

這是我的示例代碼：

@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)
  }
}

構造函數輸出：

callApi輸出：

如您所見，兩個變量並不相同，並且httpClient的get屬性未定義。

我會在整個類中使用構造函數中的變量，但是我想要擴展此類，而在構造函數中使用變量並不方便。

任何幫助/建議將不勝感激。

謝謝，

將

Answer 1

如果您確實不想在基類的構造函數中注入服務，則還有另一種選擇。

1.聲明一個包含對注入器的引用的全局變量，並將其分配到您的模塊中（或其他位置，在調用基類的構造函數之前）

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

export let InjectorInstance: Injector;

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

2然后您可以在基類中像這樣使用它

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

export class MyBaseClass  
{
    private httpClient : HttpClient:

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

}

Answer 2

您類上的屬性httpClient只是被設置為HttpClient類的構造函數。 如果需要該類的實例，則需要讓Angular通過依賴注入將其提供給您，例如httpClient2屬性（即，作為構造函數的參數）。

注意，將private訪問器添加到構造函數上的參數是語法糖，它可以執行以下操作：

class MyBaseClass {
    private httpClient2: HttpClient;

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