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

Posted 2023-03-31

【中文标题】如何在 Typescript 类中创建 Angular 5 HttpClient 实例

【英文标题】：How to create Angular 5 HttpClient instance in Typescript class

【发布时间】：2018-03-15 22:17:33

【问题描述】：

我正在编写一个包含 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 属性未定义。

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

任何帮助/建议将不胜感激。

谢谢，

会

【问题讨论】：

您能否以派生类不需要特定构造函数的方式创建基类？

如果你的意思是子类，那么没有。我必须在构造函数子类中运行“super()”作为我的第一条语句。

派生类中绝对需要构造函数吗？

不错的主意，但我想我确实需要它们。

【参考方案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);
    

【讨论】：

有趣的想法，我去看看。如果可行，我可能会将此作为我的答案...谢谢。

【参考方案2】：

您的类上的属性httpClient 只是被设置为HttpClient 类构造函数。如果您需要该类的实例，则需要让 Angular 通过依赖注入将其提供给您，例如您的 httpClient2 属性（即作为构造函数的参数）。

请注意，将private 访问器添加到构造函数的参数是语法糖，它执行以下操作：

class MyBaseClass 
    private httpClient2: HttpClient;

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

【讨论】：

我真的很想避免在构造函数中注入它。

为什么？...这就是你在 Angular 中正确做事的方式

如果不使用依赖注入，你将很难正确测试，尤其是当你需要开始模拟网络调用之类的东西时

当我扩展 MyBaseClass 时，我希望在子类中能够调用 super()。有可能吗？

是的，你会这样做