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
– acdcjunior, Commented Feb 21, 2016 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
– Ng2-Fun, Commented Feb 21, 2016 at 23:01
You want that without inheritance (Child1 extends Parent clause)? Or you didn't know about it? — acdcjunior
– acdcjunior, Commented Feb 21, 2016 at 23:03
You can inject non-classes values into the constructor, but it's a little bit annoying to define through provider each one of them. — Eric Martinez
– Eric Martinez, Commented Feb 21, 2016 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
– Ng2-Fun, Commented Feb 21, 2016 at 23:07

Sasxa · Accepted Answer · 2016-02-21 23:05:36Z

6

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...

edited Feb 21, 2016 at 23:05

answered Feb 21, 2016 at 22:59

Sasxa

41.4k17 gold badges91 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jek Over a year ago

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();

Sasxa Over a year ago

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...

Ng2-Fun Over a year ago

Great! Thanks @Sasxa

Ng2-Fun Over a year ago

@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.

Collectives™ on Stack Overflow

In Angular2, use inheritance or inject dependency?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related