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

Question

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

3

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

- Ng2-Fun

如何初始化？您想将与Child1具有相同名称的Parent属性设置为什么？ - acdcjunior

是的，父类和子类具有相同的属性名称。目前，当调用Child1类的函数时，例如onMouseOver() { this._parent.onMouseOver(); }，它只会更改当前图像和启用父属性的值。但我想更改子类的这些属性值。你知道我该怎么做吗？ - Ng2-Fun

你想要在没有继承（Child1 extends Parent）的情况下实现吗？或者你不知道这一点？ - acdcjunior

您可以将非类值注入构造函数中（http://plnkr.co/edit/nMSbAAL6rplTldAOP8tW?p=preview），但通过提供程序定义每个值有点麻烦。 - Eric Martinez

我不知道如何在Angular2中使用继承。在Java中，我们可以使用extends。但是在这里，我被告知要使用注入依赖来实现继承。我非常困惑应该怎么做。根据我的示例，你知道如何在Angular2中使用继承吗？ - Ng2-Fun

你只需要使用extends并在构造函数中调用super()，类将继承基类方法和属性，你可以在需要时使用或重写它们。请看我的回答。 - Sasxa

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sasxa · Accepted Answer

当你继承一个类时，主类可以使用基类的方法和属性。

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