angular - 在 Angular2 中，使用继承还是注入(inject)依赖？

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，例如。

这是在两个不同的类中扩展基类的方式:

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() 方法，您可以在他们的代码/模板中使用它们...