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

时间:2018-03-15 22:17:33

标签: angular typescript get undefined httpclient

我正在编写一个包含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)
  }
}

构造函数输出: enter image description here

callApi输出: enter image description here

正如您所看到的,两个变量不同,httpClient的get属性未定义。

我会在整个类中使用构造函数中的变量,但我想要的是扩展这个类并在构造函数中使用变量不方便。

非常感谢任何帮助/建议。

谢谢,

威尔

2 个答案:

答案 0 :(得分:5)

如果您真的不想在基类的构造函数中注入服务,还有另一种选择。

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

}

答案 1 :(得分:2)

您类上的属性$user = User::where('id', $id)->first()->load('experiences_user'); 只是设置为httpClient类构造函数。如果你需要该类的一个实例,你需要让Angular通过依赖注入为你提供它,比如HttpClient属性(即作为构造函数的参数)。

作为一个注释,在构造函数上添加httpClient2访问器是参数:

private