동적 인, 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를 그것을 얻는 방법을 에 사용 가치 다른 소스에 주입?

Answer 1

사용 가치가 공급자의 사용 가치가 아닙니다.

Source1-Service 및 Source2-Service는 추상 클래스를 확장하는 클래스 여야합니다. 그 후에 당신은 두 개의 별개의 공급자에게 당신의 서비스를 주입합니다.

클래스가 추상 클래스를 확장 할 때 확장 클래스는 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

학습과

를 들어 나는 추상 클래스를 사용하는 것은 좋지 않습니다 생각 이 경우에. 당신은 내가 여기 DI 각 문서를 읽을 수에 초대, 인터페이스를

를 사용하는 것을 선호 그리고해야 https://angular.io/guide/dependency-injection#providers 자세한 내용