Angular：重载构造函数 DRY答案

【问题标题】：Angular: Overload constructor DRYAngular：重载构造函数 DRY
【发布时间】：2020-05-27 23:55:18
【问题描述】：

假设我们有以下两个组件：

export class HeroComponent {
  constructor(
    public service1: Service1,
    public service2: Service2,
 ) {
   // do something
 }
}

export class AdvancedHeroComponent extends HeroComponent {
  constructor(
    public service1: Service1,
    public service2: Service2
  ) {
    super(service1, service2);
    // do something more
  }
}

有什么方法可以告诉 Angular 基类和扩展类的构造函数的参数是相同的，除了复制粘贴吗？

提前致谢！

【问题讨论】：

标签： angular typescript angular-components

【解决方案1】：

下面的解决方案一般适用于 TS，但不适用于 Angular，它在 TS 之上有额外的编译器转换?

您可以在函数参数/参数中使用 rest 和 spread 来使其工作。您还需要 Parameters 预定义类型来从基本构造函数中提取原始参数类型：

export class HeroComponent {
  constructor(
    public service1: Service1,
    public service2: Service2,
 ) {
   // do something
 }
}

export class AdvancedHeroComponent extends HeroComponent {
  constructor(
    ...p: ConstructorParameters<typeof HeroComponent>
  ) {
    super(...p);
    // do something more
  }
}

Playground Link

注意您不需要在派生类型参数中使用public 修饰符。该字段已在基本类型上声明，因此额外的 public 只会重新声明该字段。这实际上可能会导致 private 或 protected 字段出现问题。

【讨论】：

这看起来像是一个干净的解决方案。我无法在 Stackblitz 中重新创建工作版本。我正在尝试为我的高级英雄添加额外的服务，但无论有没有额外的服务，都无法解析 ConstructorParameters。我错过了什么？ stackblitz.com/edit/…
@KurtHamilton 嗯...这并不理想.. Angular 在 TS 之上有一个额外的转换。那个额外的转换负责确保正确的参数注入..它显然不支持这个技巧?。我会将其归类为 Angular IMO 中的错误。

【解决方案2】：

您可以提取“做更多”逻辑并在子类中覆盖：

export class HeroComponent {
  constructor(
    public service1: Service1,
    public service2: Service2,
 ) {
   // do something
   this.doSomethingMore();
 }

  protected doSomethingMore() {}
}

export class AdvancedHeroComponent extends HeroComponent {
    // no explicit constructor definition

    protected doSomethingMore() {
        console.log('actually doing something more');
    }
}

【讨论】：