In Angular2, use inheritance or inject dependency?

Question

In angular2, suppose I have a Parent class and a Child1 class, they have the same properties/members and methods. How to initialize the Child1 class?

Service

@Injectable()
export class Parent {  
    constructor(
        private currentImg: string,
        private catImg: string,
        private dogImg: string,
        private enable: boolean) {
    }

    onMouseOver() {
        enable = true;
        currentImg = catImg;
    }

    onMouseClick() {
        enable = false;
        currentImg = dogImg;
    }

}

One of the child class want to extends Parent class:

import {Parent} from "./Parent";

@Component({
    selector: 'app',
    templateUrl: 'app/child.html',
    providers: [Parent]
})

export class Child1 {

     private currentImg: string = "img/dog.png",
     private catImg: string = "img/cat.png",
     private dogImg: string = "img/dog.png",
     private enable: false

    constructor(private _parent: Parent) {
    }

    onMouseOver() {
        this._parent.onMouseOver();
    }

    onMouseClick() {
        this._parent.onMouseClick();
    }
}

Initialize how? You want to set `Parent`'s properties that have the same name to `Child1`? — acdcjunior, Feb 21 '16 at 22:55
Yep, Parent and Child have the same properties name. Right now, when call the function of Child1 class, for example, onMouseOver() { this._parent.onMouseOver(); }, it only changes the value of currentImg and enable of Parent Properties. But I want to change those properties value of Child class. Do you know how can I do? — Ng2-Fun, Feb 21 '16 at 23:01
You want that without inheritance (`Child1 extends Parent` clause)? Or you didn't know about it? — acdcjunior, Feb 21 '16 at 23:03
You can [inject non-classes values](http://plnkr.co/edit/nMSbAAL6rplTldAOP8tW?p=preview) into the constructor, but it's a little bit annoying to define through provider each one of them. — Eric Martinez, Feb 21 '16 at 23:04
I don't know how to use inheritance in anuglar2. In Java, we can use extends. But here, I was told to use inject dependency to realize inheritance. I am very confused about what should I do. Do you know have to use inheritance in angular2 based on my example? — Ng2-Fun, Feb 21 '16 at 23:07
You just have to use `extends` and call `super()` from the constructor, and classes will inherit base class methods and properties that you can use or overwrite when you need. See my answer. — Sasxa, Feb 21 '16 at 23:11

Sasxa · Accepted Answer · 2016-02-21T23:05:36.637

When you extend a class main class can use base class' methods and properties.

export class Base {  
    private image: string = "img/dog.png"; // default image
    // you don't need catImg and dogImg here...
    // private catImg: string;
    // private dogImg: string;
    private currentImg: string;
    private enable: boolean;

    constructor() { }

    onMouseOver(image) {
        enable = true;
        currentImg = image;
    }

    onMouseClick(image) {
        enable = false;
        currentImg = image;
    }

}

When you want to set properties in your main class, you don't initialize/set value to them in the base class. You only need to declare those properties and methods that you are using in Base class. You can set common properties that classes will share, like default image, for example.

This is how you would extend Base class in two different classes:

import {Base} from "./Base";

@Component({
    selector: 'app',
    template: `<button (click)="onMouseClick(image)">show cat</button>`,
    providers: []
})
export class CatImage extends Base {

    private image: string = "img/cat.png",
    constructor() { 
      super();
    }
}

@Component({
    selector: 'app',
    template: `<button (click)="onMouseClick(image)">show dog</button>`,
    providers: []
})
export class DogImage extends Base {

    private image: string = "img/dog.png",
    constructor() { 
      super();
    }
}

Both CatImage and DogImage will inherit enable, currentImg properties, onMouseOver() and onMouseClick() methods from Base class, and you can use them in their code/templates...

Very nice answer. May I ask if I have this file `auth0.service.ts` for authentication. Do I use it like this `export class CatImage extends Auth0Service {...}` and `export class DogImage extends Auth0Service {...}` so I can use the method in `auth0.service.ts` for example `.isLoggedIn();` — Jek, Feb 22 '16 at 01:04
No, you extend a class when you want to change or, well, extend it's functionality (: To use a service you would inject it in constructor, see [this example](http://stackoverflow.com/a/35540743/1876949)... — Sasxa, Feb 22 '16 at 01:15
@Sasxa Have you deleted plunk code example? I have a question, if I don't want to pass parameter through functions like onMouseOver(image) because I have multiple parameters to pass, how should I do? Right now, I declared all the same properties as public in both child and parent, so that I can write function without parameter onMouseOver(), but I know declared properties as public is very unsafe. — Ng2-Fun, Mar 02 '16 at 04:16

In Angular2, use inheritance or inject dependency?

1 Answers1