アングル4の抽象クラスの動的な複数プロバイダ

Question

私は抽象クラスを使用してさまざまなソースからデータを表示しています。すべてのソースは抽象クラスに注入され、コンポーネント内のデータを表示します。

これは、データを取得するには、抽象クラスを使用している私のコンポーネント、次のとおりです。

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"); 
    } 

} 

、私はdidnのuseValue異なる注入源に注入する方法を教えてください。

Answer 1

プロバイダの値を使用することは、ユースケースには適していません。

Source1-ServiceおよびSource2-Serviceは、抽象クラスを拡張するクラスである必要があります。その後、2つの異なるプロバイダにサービスを注入します。

クラスが抽象クラスを継承する場合、拡張クラスはメソッドonMessage（ここ）を定義する必要があります。完全なコードについては

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

futher

のために私はそれが抽象クラスを使用するのは良いアイデアではないと思いますこの場合。あなたは、私がここにDI角度のドキュメントを読むことをあなたに招待し、インターフェース

を使用することを好むとすべきである：https://angular.io/guide/dependency-injection#providers詳しく