Angular2依赖注入，在类继承期间未注入服务

typescript

Angular2依赖注入：类继承期间的服务注入问题

在Angular2中，依赖注入是一种重要的设计模式，用于管理类之间的依赖关系。通过依赖注入，我们可以轻松地将服务注入到组件、指令或其他类中，从而实现代码的模块化和可测试性。

然而，在类继承期间，如果没有正确地处理依赖注入，可能会遇到服务未被注入的问题。这种情况下，我们需要了解问题的根源，并找到解决方案。

问题描述

在类继承期间，如果没有正确处理依赖注入，子类可能无法访问父类中已注入的服务。这是因为父类的构造函数在子类构造函数之前被调用，从而导致子类还未初始化完成时，父类中的服务已经被使用。

案例

让我们通过一个简单的案例来说明这个问题。假设我们有一个父类LoggerService和一个子类UserService，它们都依赖于一个HttpService来进行网络请求。

typescript
import { Injectable } from '@angular/core';
@Injectable()
export class HttpService {
  get(url: string) {
    // 发送网络请求
  }
}
@Injectable()
export class LoggerService {
  constructor(private httpService: HttpService) {}
  log(message: string) {
    this.httpService.get('/log?message=' + message);
  }
}
@Injectable()
export class UserService extends LoggerService {
  constructor(private httpService: HttpService) {
    super(httpService);
  }
  getUser(id: number) {
    this.log('Fetching user with id: ' + id);
    // 获取用户信息
  }
}

在上面的例子中，LoggerService和UserService都依赖于HttpService，并通过构造函数进行了注入。然而，当我们尝试在UserService中调用log方法时，会遇到依赖注入失败的问题。

问题分析

问题的根源在于子类的构造函数中没有正确地处理依赖注入。根据Angular的依赖注入原理，当子类继承父类时，子类的构造函数应该通过super关键字调用父类的构造函数，以确保父类中的依赖项被正确地注入。

在上面的例子中，我们可以看到UserService的构造函数中调用了super(httpService)，但却没有接收到这个参数。这是因为父类LoggerService的构造函数中已经将httpService注入，子类的构造函数并没有接收到这个参数。

解决方案

为了解决这个问题，我们需要在子类的构造函数中接收父类构造函数的参数，并将其传递给super关键字。这样，父类中的依赖项就能够正确地注入到子类中。

typescript
@Injectable()
export class UserService extends LoggerService {
  constructor(private httpService: HttpService) {
    super(httpService);
  }
  getUser(id: number) {
    this.log('Fetching user with id: ' + id);
    // 获取用户信息
  }
}

通过在子类UserService的构造函数中接收httpService参数，并将其传递给super(httpService)，我们成功地解决了依赖注入失败的问题。

在类继承期间，正确处理依赖注入非常重要。通过确保子类的构造函数中接收并传递父类构造函数的参数，我们可以避免服务未被注入的问题。这样，我们就能够在父类和子类中正确地使用依赖项，实现代码的模块化和可测试性。