각도로 반전 제어 (IoC) 수행하기

Question

MapService 인터페이스와 GoogleMapsService 및 LeafletMapService의 두 가지 구현이 있다고 가정 해보십시오. 패키지 (또는 Angular2?)가 개발자가 아닌 필요한 구현을 호출하기를 원합니다. 구성 요소에서 나는 서비스의 유형은 인터페이스가되고 싶어요 의미

export interface MapService { 
//define my API 
} 

@Injectable() 
export class GoogleMapsService implements MapService { 
//implement the API 
} 

는 (그래서 구현에 따라되지 않음) :

import { Component } from '@angular/core'; 
import { MapService } from './map.service'; 
import { GoogleMapsService } from './google-maps.service'; 

@Component({ 
    template : `...`, 
    providers: [GoogleMapsService] 
}) 

export class MyComponent { 

    constructor(private googleMapsService : MapService) { //notice the type of the service here 
    } 
} 

가 어떻게 그것을 달성 할 수 있는가? 이 모듈 범위에서 같은 일을 할 수

import { Component } from '@angular/core'; 
import { MapService } from './map.service'; 
import { GoogleMapsService } from './google-maps.service'; 

@Component({ 
    template : `...`, 
    providers: [ 
     { provide: MapService, useClass: GoogleMapsService } 
    ] 
}) 

export class MyComponent { 

    constructor(private googleMapsService : MapService) { 
    } 
} 

참고 :

Answer 1

따라서 @ jb-nizet의 훌륭한 의견을 기반으로합니다. 나는 InjectionToken을 사용하여 내가 원하는 것을 할 수 있었다.

import { Injectable, InjectionToken } from '@angular/core'; 
export const GOOGLE_MAPS_IMPL = new InjectionToken<MapService>('googleMapImpl'); 

export interface MapService { 
//define the API 
} 

@Injectable() 
export class GoogleMapsService implements MapService { 
//implement the API 
} 

그리고 구성 요소 :

import { Component, Inject } from '@angular/core'; 
import { MapService } from './map.service'; 
import { GoogleMapsService, GOOGLE_MAPS_IMPL } from './google-maps.service'; 

@Component({ 
    template : `...`, 
    providers: [{ provide: GOOGLE_MAPS_IMPL, useClass: GoogleMapsService }] 
}) 

export class MyComponent { 
    constructor(@Inject(GOOGLE_MAPS_IMPL) private googleMapsService : MapService) { 
    } 
} 

Answer 2

는 공급자 배열에서 다음 구문을 사용합니다.