javascript - Angular 6 服务和类继承

Question

Angular 6 现在有 injectable providers这是注入(inject)服务的新推荐方式，它工作得很好，除了我在使用扩展另一个服务的服务时遇到问题。举个例子，假设我有

@Injectable({
  providedIn: 'root'
})
export class ParentAppService { ... }

@Injectable({
  providedIn: 'root'
})
export class ChildAppService extends ParentAppService { ... }

问题是无论我在组件中请求什么，父类总是被注入(inject)。

所以如果你要求

constructor(private childAppService: ChildAppService) { ... }

您仍将获得一个 ParentAppService 实例，这不是预期的。

一个非常简单的解决方法是仅以老式的方式在您的模块中注册提供者，这是可行的:

@NgModule({
 providers: [AppService, ChildAppService]
})

但这基本上是旧的做事方式，并且没有像新的 providedIn 注册过程那样更好的 tree-shaking 和更干净的测试的好处。

所以我的问题是，执行此操作的正确方法是什么？有没有更好的方法来注册提供者以便我可以获得所需的行为(也许以某种方式指定提供者 token ？)。

我设置了一个 super 简单的 stackblitz 示例来展示发生了什么。

https://stackblitz.com/edit/angular-lacyab?file=src%2Fapp%2Fapp.component.ts

您会注意到它说“您好，我是应用程序服务!”即使该组件要求提供子服务。如果在应用程序模块中，我们以旧方式注册提供者(请参阅注释掉的代码)，突然间就会注入(inject)正确的提供者。

感谢您的帮助!

Answer 1

更新:

已经有一个拉取请求 https://github.com/angular/angular/pull/25033

原始版本

问题:似乎新的 angular treeshakable 服务不尊重继承:

第一个 Angular 在 AppService 函数上定义了(1) ngInjectableDef 属性。然后，您从 AppService 继承 ChilAppService，以便子类包含父类的所有属性。最后，当 Angular 尝试在 ChildAppService 上定义(2) ngInjectableDef 属性时，它不能因为它已经存在(3) 感谢 javascript 原型(prototype)继承。

为了修复它，您可以

1) 通过在子服务上定义未定义的 ngInjectableDef 属性来解决它，这样它就不会从父类属性中读取已经填充的内容，angular 将能够定义 ngInjectableDef关于子类:

@Injectable({
  providedIn: 'root'
})
export class ChildAppService extends AppService {
  <b>static ngInjectableDef = undefined;</b>
  constructor() {
    super();
    this.name = 'CHILD SERVICE';
  }
}

Forked stackblitz

2) 或者在github上报告问题

3) 或使用组合而不是评论中建议的继承。