在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 都将从 Base 类继承 enable、currentImg 属性、onMouseOver() 和 onMouseClick() 方法，您可以在它们的代码/模板中使用它们...