AngularJS：需要复制继承的依赖项？

Question

结合使用 Angular 1.6 和 ES6 类我遇到了以下问题：

我写了一个有一些依赖的服务（惊喜！）

class myService {

    /*@ngInject*/
    constructor($q){
      this.$q = $q;
      this.creationDate = new Date();
    }

    doStuff(data){
      return this.$q.when(data);
    }
}

angular.module('app').service('myService', myService)

但是我得到了一个构建目标，其中的服务需要更高级一些，所以我对其进行了扩展并在这种情况下使用了扩展服务：

class myFancyService extends myService{

    /*@ngInject*/
    constructor($q, $http){
      super($q);
      this.$http = $http;
    }

    doFancyStuff(data){
      console.log(this.creationDate);
      return this.doStuff(data)
          .then((stuff) => this.$http.post('api.myapp', stuff));
    }
}

angular.module('app').service('myService', myFancyService)

到目前为止，这工作正常，但有一个主要缺点：

通过调用super(dependencies)，我的基类的依赖项无法从@ngInject 自动注入。因此，我需要非常清楚，每当我更改 myService 的依赖项时，myFancyService（以及任何其他潜在的未来子类）的依赖项也需要更改。

我不能使用组合代替继承，因为myService 没有注册为角度服务，因此不能作为依赖注入。

问题：

有没有办法自动注入基类的依赖项？

如果没有，至少有办法让我的单元测试提醒我需要更新myFancyService 的依赖项吗？如果super($q) 的参数（或者可能只是参数的数量）等于 myService-constructor 的参数（数量），我还没有找到一种方法来测试 karma/jasmine。

Answer 1

在super 上面的代码中，需要明确指定参数。

一种更防故障的方法是在当前类中执行所有依赖项分配：

constructor($q, $http){
  super();
  this.$q = $q;
  this.$http = $http;
}

如果在父构造函数中使用这些服务，这可能会产生问题。测试父构造函数的参数并不容易，因为这涉及模块模拟。一个简单且相对可靠的测试方法是断言：

expect(service.$q).toBe($q);
expect(service.$http).toBe($http);

这应该在任何 Angular 单元测试中完成，事实上，即使一个类没有被继承。

考虑到@ngInject 所做的只是创建$inject 注解，更好的方法是引入处理DI 的基类：

class Base {
  constructor(...deps) {
    this.constructor.$inject.forEach((dep, i) => {
      this[dep] = deps[i];
    }
  }
}
BaseService.$inject = [];

class myService extends Base {
    /*@ngInject*/
    constructor($q){
      super(...arguments);
      ...
    }
    ...
}

在这一点上很明显@ngInject 不再有帮助，需要与arguments 混淆。没有@ngInject，就变成了：

class myService extends Base {
    static get $inject() {
      return ['$q'];
    }

    constructor(...deps){
      super(...deps);
      ...
    }
    ...
}

如果依赖赋值是子构造函数中唯一要做的事情，则可以有效地省略构造函数：

class myService extends Base {
    static get $inject() {
      return ['$q'];
    }

    ...
}

类字段和 Babel/TypeScript 更简洁（浏览器不支持原生）：

class myService extends Base {
    static $inject = ['$q'];

    ...
}

Answer 2

要记住两件事：

1. 在Inheritance 模式中，具有接口一致性 是必不可少的，子类可以重新实现方法或属性，但它们不能改变调用方法的方式（参数等...）
2. 您仍在向dependency injection 注册BaseService，但您可能不需要这样做，因为它对您来说看起来像是一个抽象类。

---

这可以解决你的问题（运行脚本看看发生了什么） 您基本上需要在每个 derived class 中扩展 static $inject property 并在每个子构造函数中使用解构：

• 好处：你不需要知道父类有什么依赖。
• 约束：始终在子类中使用第一个参数（因为rest operator 必须是最后一个）

function logger(LogService) {
  LogService.log('Hello World');
}

class BaseService {
  static get $inject() { 
    return ['$q']; 
  }

  constructor($q) {
    this.$q = $q;
  }
  
  log() {
    console.log('BaseService.$q: ', typeof this.$q, this.$q.name);
  }
}

class ExtendedService extends BaseService {
  static get $inject() { 
    return ['$http'].concat(BaseService.$inject); 
  }

  constructor($http, ...rest) {
    super(...rest);
    this.$http = $http;
  }
  
  log() {
    super.log();
    console.log('ExtendedService.$http: ', typeof this.$http, this.$http.name);
  }
}


class LogService extends ExtendedService {
  static get $inject() { 
    return ['$log', '$timeout'].concat(ExtendedService.$inject); 
  }

  constructor($log, $timeout, ...rest) {
    super(...rest);
    this.$log = $log;
    this.$timeout = $timeout;
  }
  
  log(what) {
    super.log();
    this.$timeout(() => {
      this.$log.log('LogService.log', what);
    }, 1000);
  }
}

angular
  .module('test', [])
  .service('BaseService', BaseService)
  .service('ExtendedService', ExtendedService)
  .service('LogService', LogService)
  .run(logger)
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>

<section ng-app="test"></section>

---

我还在 babel-plugin-angularjs-annotate 中打开了feature request： https://github.com/schmod/babel-plugin-angularjs-annotate/issues/28