如何在 Angular 项目中使用 TypeScript、接口和依赖注入的多态性

Question

我正在开发一个必须使用依赖注入的小角度项目。 我有以下结构：

文件 app.component.html 属于视图，它具有以下指令：

<h1>{{nombreServicio}}</h1>

文件prueba.type.ts，有接口；

export interface PruebaType{
    calcularNombre(): string;
}

prueba.service.ts文件是服务，扩展了接口。

import { Injectable } from '@angular/core';
import { PruebaType } from './prueba.type' 

@Injectable()
export class PruebaServicio implements PruebaType{
    calcularNombre(): string{
        return "Andy";
    }
}

最后，app.components.ts 文件使用了PruebaServicio 服务的功能，但它不是直接使用PruebaServicio类型的对象>，而不是使用 PruebaType 类型的对象（这是实现 PruebaServicio 类的接口）：

import { Component } from '@angular/core';
import { PruebaType } from './service/Prueba.type';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nombreServicio: string;

  constructor(private prueba: PruebaType){
    this.nombreServicio = prueba.calcularNombre();
  }

}

当我运行应用程序时，我得到了错误：

无法解析 AppComponent 的所有参数：(?)

想问一下，TypeScript 是否有办法在依赖注入中使用多态性。

感谢您的帮助。

问候。

------------------------------------------已添加--------------------------------

我用Interfaces, TypeScript and Dependency Injections找到了关于多态性的解释：

由于接口不是 JavaScript 的一部分，它们就会消失 编译 TypeScript 后。没什么新鲜的，但这意味着我们 不能使用接口进行依赖注入

然后，在 TypeScript 中进行多态的唯一方法是不使用抽象类或像 Miguel Pinto 在下面的回复中所说的抽象类。 有人认为不同吗？

Answer 1

我认为你需要创建一个抽象类：

接口 PruebaType

export interface PruebaType{
    calcularNombre(): string;
}

抽象 PruebaTypeService ：

export abstract class PruebaTypeService implements PruebaType{

    abstract calcularNombre(): string;

}

您的服务

@Injectable()
export class PruebaServicio extends PruebaTypeService {
    calcularNombre(): string{
        return "Andy";
    }
}

现在你可以定义你的提供者了：

@NgModule({
      ...
      providers: [
        ...,
        {provide: PruebaTypeService , useClass: PruebaServicio }
      ]
})