角度 4 中抽象类的动态、多个提供程序 [英] dynamic, multiple provider for abstract class in angular 4

问题描述

我正在使用抽象类来显示来自不同来源的一些数据.每个源都注入抽象类中以显示组件中的数据.

I am using an abstract class to show some data from different sources. Every source is injected in the abstract class to show the data in a component.

这是我的组件，它使用抽象类来获取数据:

This is my Component, which is using the abstract class to get the data:

    import {AbstractclassService} from '../../../../abstractclass.service';
    import {Source2-Service} from '../../../../Source2.service';
    import {Source1-Service} from '../../../../Source1.service';

    @Component({
      selector: 'app-gauge',
      templateUrl: './gauge.component.html',
      providers: [
        {
          provide: AbstractclassService,
          useValue: Source1-Service , Source2-Service 
          multi: true
        }
    ],
     styleUrls: ['./gauge.component.css']
    })

    export class GaugeComponent implements  OnInit {

    data = [
        {
          name: 'test',
          value: 'test'
        }
      ];

      constructor( public abstractclassService: AbstractclassService  ) {}


      ngOnInit () {

        this.abstractclassService.onMessage = (msg: string) => {
          this.data = [{name: 'test', value: msg}];
      };


    }

这是我的抽象类即服务:

@Injectable()
export abstract class AbstractclassService {


  public onMessage(msg: string): void {
    console.log("Testing");
  }

}

现在，我不明白如何在 useValue 中注入不同的来源?

Now, i didn't get it how to inject in useValue the different sources?

推荐答案

在提供者中使用值不是您用例的好方法.

Use value in provider is not the good way for your use case.

Source1-Service 和 Source2-Service 必须是扩展抽象类的类.之后，您将您的服务注入到两个不同的提供商中.

Source1-Service and Source2-Service must be classes which extends the abstract class. After that you inject into two distinct providers your services.

当一个类扩展一个抽象类时，扩展类必须定义方法onMessage(这里).

When a class extends an abstract class, the extended classes have to define the method onMessage (here).

因此，您的组件可以如下所示:

So, your component can be look like:

import { Component, Inject } from '@angular/core';
import { Observable } from "rxjs"

abstract class AbstractClassService{
  abstract onMessage(msg: string): {name: string, value: string}
}

class Source1-Service extends AbstractClassService{
  onMessage(msg: string) {
    return {name: "test", value: msg}
  }
}

class Source2-Service extends AbstractClassService{
  onMessage(msg: string) {
    return {name: "test2", value: msg}
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [
    {provide: "Impl1", useClass: Source1-Service},
    {provide: "Impl2", useClass: Source2-Service}
  ]
})
export class AppComponent  {

  msg1: {name: string,value:string}[]
  msg2: {name: string,value:string}[]

  constructor(@Inject("Impl1") private service1:AbstractClassService,
              @Inject("Impl2") private service2:AbstractClassService) {

      this.msg1 = [this.service1.onMessage("msg1")]
      this.msg2 = [this.service2.onMessage("msg2")]
  }

}

完整代码:https://stackblitz.com/edit/angular-e8sbg8?file=app%2Fapp.component.ts

后续

我认为在这种情况下使用抽象类不是一个好主意.你应该更喜欢使用接口

I think it's not a good idea to use the abstract class in this case. You should prefer to use an interface

而且，我邀请您在这里阅读 DI angular 文档:https://angular.io/guide/dependency-injection#providers 获取更多信息

And, I invite to you to read the DI angular documentation here: https://angular.io/guide/dependency-injection#providers to have more information

这篇关于角度 4 中抽象类的动态、多个提供程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！