Angular 抽象类 HttpClient 注入

Question

大家好，我是 Angular 的新手，我在使用 Injectable 类时遇到了麻烦。

我有一个抽象类（在 web.ts 上），它的受保护属性之一是 HttpClient 对象。这个抽象类的定义如下：

import { HttpClient } from "@angular/common/http";


export abstract class Web {
   protected baseURL: string;

   constructor(baseURL: string, protected http: HttpClient) {
      this.baseURL =  baseURL;
   }

   public abstract RetrieveData(pattern: string);
}

然后我有另一个类（在 webA.ts 上）扩展了 Web 类：

import { Web } from './web';

export class WebA extends Web {

   constructor() {
      super("https://www.test.com");
   }

   private Search(pattern: string) {
      pattern = pattern.replace(" ", "+");
      var searchURL = this.baseURL + `/site/searchpage.jsp?st=${pattern}&id=pcat17071`;

      console.log(searchURL);

      this.http.get(searchURL).subscribe(data => {
         console.log(data);
      });
   }

   public RetrieveData(pattern: string) {
      this.Search(pattern);
   }
}

最后，在我的网站的一个组件类中，我想将 WebA 实例化为：

private webA: Web = new WebA();

它告诉我需要在 webA.ts 中的 super("https://www.test.com"); 上传递一个 HttpClient 对象。为了解决这个问题，我可以为 WebA 创建如下构造函数：

constructor(@Inject(HttpClient) http: HttpClient) {
      super("https://www.test.com", http);
}

但这会导致我做private webA: Web = new WebA(this.http); 强迫我拥有我的组件类：

import { HttpClient } from "@angular/common/http";
...
constructor(private http: HttpClient) {}

我知道必须有另一种方法来做到这一点，因为在我看来这打破了我的班级的层次结构

TL;DR：
我需要在抽象类上“自动注入”一个 HttpClient，而不需要将此对象作为参数传递给扩展类中的 super。

Answer 1

"auto-inject" 仅在您希望 DI 机制为您创建类型时才有效。在您的情况下，我认为最好将 WebA 类声明为可使用 @Injectable 注入，并在您需要它的类中注入 WebA 实例。这样HttpClient就会自动传递。

@Injectable()
export class WebA extends Web {

   ...

   constructor(private httpClient: HttpClient) {
      super("https://www.test.com", httpClient);
   }

   ...

}

Answer 2

要么删除WebA中的构造函数

export class WebA extends Web {

   //constructor() {
   //   super("https://www.test.com");
   //}

或者重复构造函数参数并用super()转发

export class WebA extends Web {

   constructor(baseURL: string, protected http: HttpClient) {
      super(baseURL, http);
   }

如果您需要派生类中的构造函数 (WebA)，唯一的方法是重复参数并转发它们。

更新

当您使用new Xxx() 创建实例时，没有自动注入这么简单。依赖注入仅适用于 Angulars DI 为您创建的实例。

否则请参阅上面的答案。