在Angular2中,使用继承还是注入依赖？

Question

在angular2中,假设我有一个Parent类和一个Child1类,它们具有相同的属性/成员和方法.如何初始化Child1课程？

服务

@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;
    }

}

其中一个子类想要扩展Parent类:

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

Answer 1

扩展类主类时可以使用基类的方法和属性.

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

}

如果要在主类中设置属性,则不要在基类中初始化/设置它们的值.您只需要声明您在Base课堂上使用的那些属性和方法.例如,您可以设置类将共享的公共属性,例如默认值image.

这是你如何在两个不同的类中扩展Base类:

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

双方CatImage并DogImage会继承enable,currentImg性能,onMouseOver()以及onMouseClick()从基类的方法,你可以在他们的代码/模板使用它们...