外部包中的 Angular 服务 - 依赖注入 HttpClient 未定义答案

【问题标题】：Angular service in external package - dependency injection HttpClient undefined外部包中的 Angular 服务 - 依赖注入 HttpClient 未定义
【发布时间】：2021-01-25 18:33:30
【问题描述】：

假设你有以下 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？

【问题讨论】：

标签： angular typescript httpclient

【解决方案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();
  }
}

【讨论】：