inherit two component in angular with different constructor

Question

This is slightly similar to extending 2 class in typescript, but although I managed to do it in typescript, I can't find a correct way in angular.

I have an angular 7 app with 1 component, a service and a generic class.

Exactly like this Stackblitz

I would like to make a component that inherit from my class, AND my other component

here is my class =>

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

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

here my component =>

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

  ngOnInit() {
  }

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

I would like that my child extends booth, so that I am able to do

  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
  }

what I tried is this =>

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
}

}

the compiler give no error, but my component methods are not inherited

May I know what do you want to achieve by doing this? Because one alternate way can be to create 2 different parent classes and instantiate both of them within child component. — Sumit Vekariya, May 07 '19 at 03:37
Basically, I hate repeated code, here a explanation similar to why I want to do this : http://prntscr.com/nlcxnd I hope you understand it. the serviceForAnimal is shared to all the Animal, and the serviceForWolf, to all the wolf. — Crocsx, May 07 '19 at 03:55
The answer [here](https://stackoverflow.com/questions/26948400/typescript-how-to-extend-two-classes) might help you. — Rannie Aguilar Peralta, May 10 '19 at 05:07
I managed to do this with typescript only, I am trying to find a way with angular component and default class — Crocsx, May 10 '19 at 05:08
I just wanted to give a notice that, multiple inheritance brings in too much code complexity, as you already know there are also other ways that do not violate DRY. — talhature, May 10 '19 at 05:39
Yes, I believe so to if you abuse of it, but as the picture in the comment explain, is a very concise scenario, and I will not do more than this, but it would be very helpful in this situation to be able to. I know in this case that the behaviour would not make it to complex — Crocsx, May 10 '19 at 08:33
sorry i didn't get your point are you want to extends to classes with same component? or please explain what you want to may there is another method angular have for this and i can help with it. — Yaseen Ahmad, May 14 '19 at 10:06

score 5 · Answer 1 · answered May 10 '19 at 16:50

I would suggest a different approach. Make the class available to DI by annotating it with @Injectable

Then extend your parent component as usual: ChildComponent extend MyCom1Component and inject your MyClass1 using the constructor of ChildComponent Finally call the parent's constructor with the instance of the class you just injected.

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

score 2 · Accepted Answer · answered May 16 '19 at 08:02

Angular doesn't allow Multiple Inheritance. You can extend only one class in angular, although you can implement multiple interfaces. But there is a way you can do multiple inheritance (only in say) using TypeScript Mixins.

The only downside with mixins is that you will have to define all the used base class methods in the child class. [ Note - This is not actual inheritance. Basically, You are adding all Base class attributes to Child Class. ]

Also, you will have to declare a mixin method somewhere in your code which will do all the heavy-lifting. (Preferrably the app.module to have global access).

PFB the mixin method:

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

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

PFB the snippet for your ChildComponent. I have added the mixin method in your ChildComponent itself. You can place the same anywhere in your code.

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];
            }
        });
    }); 
  }
}

Llorenç Pujol Ferriol · Answer 3 · 2019-05-16T20:27:49.783

You can do it using Typescript mixins. Angular Material does it in its project, you can check it's source code

But this approach is far from perfect, since it adds a lot of boilerplate and complexity to the code that you may not need. So if you can avoid that, better.

Said that, I have forked your stackblitz project adding this solution mentioned.

In your code, you are also trying to do Typescript mixins, but you are never extending the class MyCom1Component, it seems that, but in this code below, MyCom1Component acts as a variable name! not as a class!

const addMyClassOneInheritance = <T extends new(...args: any[]) => any>(MyCom1Component: T) => {
  return class extends MyCom1Component /* THIS IS A VARIABLE NAME */ {
        constructor(...args: any[]) {
            super(...args);
        }
  };
};

In resume, what you have to do with this approach, is separate the class logic in the respective mixins, like:

export function mixinMyCom1Component<T extends Constructor<{}>>(base: T): MyCom1ComponentCtor & T {
  return class extends base {
    propertyComp1 = "MyCom1";
    constructor(...args: any[]) { super(...args); }
    sayHelloComponent(value:string){console.log('component say'+ value)}
  };
}

export function mixinMyClass1<T extends Constructor<{}>>(base: T): MyClass1Ctor & T {
  return class extends base {
      propertyClass1 = "MyClass1"
      constructor(...args: any[]) { super(...args); }
      init(value:string){
        this.propertyClass1 = value;
      }
      sayHelloClass(value:string){console.log('class say'+ value)}
    };
}

After that, you can compose the ChildComponent like this:

export class ChildComponentBase {
  constructor() {}
}

export const _ChildComponentMixinBase = mixinMyClass1(mixinMyCom1Component(ChildComponentBase));

@Component({...})
export class ChildComponent extends _ChildComponentMixinBase {
    constructor(private service: Service1Service) { 
        super()
    }
}

PD: See the stackblitz example, since in this code posted there is missing some of the boilerplate and typings needed to achieve it correctly.

Hope this can help somehow!

score 0 · Answer 4 · answered May 14 '19 at 22:12

0

This is not possible in Angular, since you can't extend 2 classes in one class in Javascript, and since a component is a class.

You should look for another way to reuse your code, as Jose Guzman just said. Maybe creating Services

answered May 14 '19 at 22:12

Michael Chiche

191
1
8

inherit two component in angular with different constructor

4 Answers4