Angular 服务在外部 package - 依赖注入 HttpClient 未定义

Question

假设您有以下 Angular 库：

第一个库，一个基础服务库：

// base.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export abstract class BaseService {
  constructor(private httpClient: HttpClient) {}

  protected request(): Observable<any> {
    return this.httpClient.request('GET', 'http://127.0.0.1:3100/CRM/v1/customers');
  }
}

第二个图书馆：

// test.service.ts

import { Injectable } from '@angular/core';
import { BaseService } from '@company/data-access-base';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export abstract class TestService extends BaseService {
  testRequest(): Observable<any> {
    return this.request();
  }
}

比您决定在您的应用程序中使用 TestService 。

当然，您已经在应用程序的 app.module.ts 中导入了HttpClientModule 。 然后注入 TestService 并尝试使用它：

import { Component, OnInit } from '@angular/core';
import { TestService } from '@company/data-access-test';

@Component({
  selector: 'comp-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent implements OnInit {
  constructor(private testService: TestService) {}

  ngOnInit() {
    this.testService.testRequest().subscribe((r) => console.log('Test ok', r))
  }
}

在这里，您在控制台中收到以下错误：

core.js:4610 ERROR TypeError: Cannot read property 'request' of undefined
    at TestService.request (company-data-access-base.js:42)
    at TestService.testRequest (company-data-access-crm.js:7)
    at HomeComponent.ngOnInit (home.component.ts:13)
    at callHook (core.js:3405)
    ...

如何在 BaseService 中注入 HttpClient？

Answer 1

转向我们，鉴于应用程序中的注入服务是TestService ，这就是 Angular （据我所知任何其他框架的 DI 系统）将管理的服务。

因此，简单的解决方案，只需为每个服务添加一个构造函数，然后调用 super.(httpService)。

// test.service.ts

import { Injectable } from '@angular/core';
import { BaseService } from '@company/data-access-base';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export abstract class TestService extends BaseService {

  // that's what was missing
  constructor(protected httpClient: HttpClient) {
    super(httpClient);
  }

  testRequest(): Observable<any> {
    return this.request();
  }
}