如何在第三个组件类中扩展两个 Angular 类组件？答案

【问题标题】：How to extend two Angular class components in third component class?如何在第三个组件类中扩展两个 Angular 类组件？
【发布时间】：2020-12-15 06:21:30
【问题描述】：

我有一些功能我有两个单独的组件类，例如类组件 A 和类组件 B。我想在类组件 C 中扩展它们。

我听说我可以在 Angular typescript 中从 Mixin 获得帮助，但不确定如何在 Component 类中使用它。如果有任何方法可以在角度上实现相同的效果，那将会很有帮助。

我还检查了这里提到的示例： https://stackblitz.com/edit/mixin-example

我也尝试过如下的 applyMixins，但无法在 Class 组件中解决。

class A {
    start() {
        console.log('Vehicle Started');
    }
}

class B {
    end() {
        console.log('Vehicle stopped');
    }
}


class C implements A, B {
    end(): void {
        throw new Error("Method not implemented.");
    }

    start(): void {
        throw new Error("Method not implemented.");
    }
}

applyMixins(C, [A, B])

【问题讨论】：

您是否尝试过扩展而不是工具？ extends 用于继承，implements 用于接口。
从我个人的角度来看，多重继承是一种不好的方法。我相信有更好的方法。您为什么要尝试从其他 2 个组件继承？也许你需要一个可以注入的服务？

标签： angular typescript inheritance angular5 mixins

【解决方案1】：

我不太确定你为什么要这样做，但我设法使它工作： https://stackblitz.com/edit/angular-typescript-mixins

简而言之，我将函数 applyMixins 包装到了一个文件中

export function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
             if (name !== 'constructor') {
                derivedCtor.prototype[name] = baseCtor.prototype[name];
            }
        });
    }); 
}

后来在组件C中实现了组件A和B，最后在构造函数内部调用了函数：

export class CComponent implements AComponent, BComponent {
    
    end(): void {
        throw new Error("Method not implemented.");
    }

    start(): void {
        throw new Error("Method not implemented.");
    }

    constructor() {
      applyMixins(CComponent,[AComponent,BComponent])
    }
}

【讨论】：