用不同的构造函数继承角度的两个组件

Question

这与在打字稿中扩展2类有点相似，但是尽管我设法在打字稿中做到了这一点，但我找不到在angular中正确的方法。

我有一个带有1个组件，一个服务和一个通用类的angular 7应用程序。

就像这个 Stackblitz

我想制作一个继承自我的班级的组件，以及另一个我的组件

这是我的课=>

export class MyClass1<T,O> {
  propertyClass1 = "MyClass1"
  constructor() {
  }

  init(value:string){
    this.propertyClass1 = value;
  }
  sayHelloClass(value:string){console.log('class say'+ value)}
}

这是我的组件=>

export class MyCom1Component implements OnInit {
  propertyComp1 = "MyCom1"
  constructor(private service1:Service1Service) {
      this.propertyComp1 = service1.getProp();
   }

  ngOnInit() {
  }

  sayHelloComponent(value:string){console.log('component say'+ value)}
}

我希望我的孩子能扩展展位，以便我能够

  ngOnInit() {
    this.sayHelloClass(this.propertyClass1); // class say MyClass1
    this.init("hoohoho");
    this.sayHelloClass(this.propertyClass1); // class say hoohoho


    this.sayHelloComponent(this.propertyComp1); // component say MyCom1
  }

我试过的是这个=>

const addMyClassOneInheritance = <T extends new(...args: any[]) => any>(MyCom1Component: T) => {
  return class extends MyCom1Component {
        constructor(...args: any[]) {
            super(...args);
        }
  };
};
const MyMergedClass = addMyClassOneInheritance(MyClass1);
export class ChildComponent extends MyMergedClass<string,number> {
ngOnInit(){
   this.sayHelloClass(this.propertyClass1); // compile ok, execute give a value
   this.sayHelloComponent(this.propertyComp1); // compile ok, execute "can't find sayHelloComponent
}

}

编译器没有给出错误，但是我的组件方法没有被继承

Answer 1

我建议使用另一种方法。通过使用注释使类对DI可用@Injectable

然后像往常一样扩展父组件：ChildComponent extend MyCom1Component并MyClass1使用的构造函数注入您的组件。ChildComponent 最后，使用刚刚注入的类的实例调用父组件的构造函数。

constructor(public myclass1: MyClass1) {
    super(myclass1);
  }

Answer 2

角度不允许Multiple Inheritance。你可以extend only one class有角度，虽然你可以implement multiple interfaces。但是有一种方法可以(only in say)使用TypeScript Mixins.

唯一的downside问题mixins是你必须这样做define all the used base class methods in the child class。[ 注意 - 这不是实际的继承。基本上，您将所有基类属性添加到子类中。]

此外，您还必须在代码中的某个位置使用declare一个mixin方法来完成所有繁重的工作。(Preferrably the app.module to have global access)。

PFBmixin方法：

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

参考- https://www.stevefenton.co.uk/2014/02/TypeScript-Mixins-Part-One/

PFB 您的ChildComponent. 我已经mixin在你ChildComponent本身添加了该方法。您可以将相同的内容放置在代码中的任何位置。

export class ChildComponent  {
  propertyClass1: string;
  propertyComp1:string;
  sayHelloClass: (value) => void;
  init: (value) => void;
  sayHelloComponent: (value) => void;
  constructor(private service: Service1Service) { 
      // super()
  }

  ngOnInit() {
    this.applyMixins(ChildComponent, [MyCom1Component,MyClass1]);
    this.sayHelloClass(this.propertyClass1);
    this.init("hoohoho");
    this.sayHelloClass(this.propertyClass1);
    this.sayHelloComponent(this.propertyComp1);
  }

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