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

Posted 2023-03-13

【中文标题】在Angular2中，使用继承还是注入依赖？

【英文标题】：In Angular2, use inheritance or inject dependency?

【发布时间】：2016-06-03 05:54:34

【问题描述】：

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

【问题讨论】：

如何初始化？要将Parent的同名属性设置为Child1？

是的，Parent 和 Child 具有相同的属性名称。此时调用 Child1 类的函数，例如 onMouseOver() this._parent.onMouseOver(); ，它只改变 currentImg 的值和 Parent Properties 的 enable。但我想更改 Child 类的那些属性值。你知道我该怎么做吗？

你想要没有继承（Child1 extends Parent 子句）？还是你不知道？

你可以inject non-classes values进入构造函数，但是通过provider来定义每一个有点烦人。

我不知道如何在 anuglar2 中使用继承。在 Java 中，我们可以使用扩展。但是在这里，我被告知使用注入依赖来实现继承。我很困惑我该怎么做。根据我的示例，您知道必须在 angular2 中使用继承吗？

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

【讨论】：

非常好的答案。请问我是否有这个文件auth0.service.ts 用于身份验证。我是否像export class CatImage extends Auth0Service ... 和export class DogImage extends Auth0Service ... 这样使用它，所以我可以使用auth0.service.ts 中的方法，例如.isLoggedIn();

不，当您想要更改时扩展一个类，或者扩展它的功能（：要使用服务，您可以在构造函数中注入它，请参阅this example...

太棒了！谢谢@Sasxa

@Sasxa 你删除了 plunk 代码示例吗？我有一个问题，如果我不想通过 onMouseOver(image) 之类的函数传递参数，因为我有多个参数要传递，我该怎么办？现在，我在子级和父级中都将所有相同的属性声明为 public，这样我就可以编写没有参数 onMouseOver() 的函数，但我知道声明为 public 的属性是非常不安全的。