Angular 无法在类中初始化服务（HttpClient）

Question

我想通过从类中创建数据访问对象来隔离 http 交互，以便在组件中我可以简单地获取如下数据：

// dashboard.component
import { AppUser } from './appuser.service'

export class DashboardComponent implements OnInit {
  user: AppUser = new AppUser();

  constructor() { }

  ngOnInit() {
    let id = JSON.parse(window.localStorage.getItem('session')).userId;
    this.user.find(id) // 'find' is from base class
      .subscribe(
        // handle user data
      );
  }
}

我已经定义了一个基类和一个像这样的子类：

// base-resource.service
import { HttpClient } from '@angular/common/http';
...
export class BaseResource {
  private fullpath: string;
  protected http: HttpClient;

  constructor (path: string) {
    this.fullpath = path;
  }

  find (id): Observable<Object> {
    return this.http.get(this.fullpath + '/' + id); // this line throws Error!
  }
}

// app-user.service
...
export class AppUser extends BaseResource {
  constructor(data?) {
    super('api/appusers');
  }
}

但是这会产生错误：ERROR TypeError: Cannot read property 'get' of undefined 来自基类函数。

我的“AppUser”实例显然是从“BaseResource”继承find，但find 正在获取“Ap​​pUser”实例，因为this 和http 的值不可用。我尝试将http 声明为公共和私有以及受保护，但这没有任何效果。我想我错过了一些关于如何扩展类的大图。

尽可能具体地，我认为我的问题是当函数需要访问基类的上下文时，如何将它们抽象为基类。

（使用 Angular 6.0.4）

编辑 我更新了标题，因为很明显这是在类中实例化 HttpClient 服务的问题。

Answer 1

报错是因为什么都没有实例化HttpClient，所以来使用的时候是未定义的。

您应该将HttpClient 注入AppUser，并通过构造函数将其传递给BaseResource

export class AppUser extends BaseResource {
  constructor(HttpClient http) {
    super(http, 'api/appusers');
  }
}

在 base-resource.service 中

import { HttpClient } from '@angular/common/http';
...
export class BaseResource {
  private fullpath: string;
  protected http: HttpClient;

  constructor (httpClient: HttpClient, path: string) {
    this.fullpath = path;
    this.http = httpClient;
  }

  find (id): Observable<Object> {
    return this.http.get(this.fullpath + '/' + id); // this line throws Error!
  }
}