如何編寫需要角2中參數的服務構造函數？

Question

我有一個聲明MetricsService服務的組件。該服務需要http模塊和兩個字符串，這兩個字符串定義主機和授權密鑰才能使用。

度量的服務如下：

@Injectable() 
export class MetricsService { 
    constructor(
     private http: Http, 
     public wsAuthKey: string, 
     public wsHost: string 
     ) { 
     this.wsAuthKey = wsAuthKey || "blahblahblahblahblahblahblahblah="; 
     this.wsHost  = wsHost || "https://preprod-admin.myservice.ws"; 
    } 

使用它是如下編寫的組件：

export class DatavizComponent implements OnInit, OnChanges { 
    constructor(
     private zms: MetricsService, 
    ) { 
    } 

我的問題是我應該怎麼寫的組件構造，使整個事情作品，包括傳遞主機和密鑰（但不傳遞http）？

注意：目前編寫的代碼不能編譯。

更確切地說，我希望該組件提供取決於應用的數據是這樣的：

export class DatavizComponent implements OnInit, OnChanges { 
     constructor(
      private zms = MetricsService("http://myhost.com", "mykey"), 
     ) { 
     } 

但是，如果這個工程，如何通過HTTP？

更新後提出的解決方案：

export class MetricsService { 

    constructor(
     private http: Http, 
     @Inject('wsAuthKey') @Optional() public wsAuthKey?: string, 
     @Inject('wsHost') @Optional() public wsHost?: string 
     ) { 
     this.wsAuthKey = wsAuthKey || "blahblah="; 
     this.wsHost  = wsHost || "https://preprod-admin.host.ws"; 


     console.log("MetricsService constructor=" 
      + " wsAuthKey="+this.wsAuthKey 
      + ", wsHost="+this.wsHost 
     ); 

    } 

在組件：

@Component({ 
    selector: 'dataviz-offers-volumes', 
    templateUrl: 'app/dataviz.component.html', 
    styleUrls: ['app/dataviz.component.css'], 
    encapsulation: ViewEncapsulation.None, 
    providers: [ 
     {provide: 'wsAuthKey', useValue: 'abc'}, 
     {provide: 'wsHost',  useValue: 'efg'}, 
    ], 
}) 
export class DatavizComponent implements OnInit, OnChanges { 

    @ViewChild('chart') private chartContainer: ElementRef; 
    @Input() private graphId:string; 
    @Input() private wsAuthKey:string; 
    @Input() private wsHost:string; 
    @Input() private maxSamples=12; 

    constructor(
     private zms: MetricsService 
    ) { 
    } 

在構造函數中，日誌如下（值不會傳遞）：

MetricsService constructor= wsAuthKey=blahblah=, wsHost=https://preprod-admin.host.ws 

它應該顯示'abc'和'efg'。

但我想知道是否沒有使用dataviz組件的組件的問題。 在此組件中，下面的信息已通過了：

@Input() private wsAuthKey:string; 
@Input() private wsHost:string; 

正如我想的標記任選地預設的宿主和鍵：

   <h1>dataviz volume</h1> 
       <div class="chartContainer left" title="Simultaneous offers via dataviz directive"> 
        <dataviz-offers-volumes 
         id="dataviz-volumes1" 
         [graphId]="graphId" 
         [wsAuthKey]="'myauthkey'" 
         [wsHost]="'http://myhost.com'" 
         [maxSamples]="123" 
        > 
        </dataviz-offers-volumes> 
       </div> 

Answer 1

這是在this question描述的共同配方尤其是。這應該是保存配置的服務：

​​

在這種情況下，當需要改變時，它可以被覆蓋或擴展爲整個模塊或特定組件：

@Component(
    ... 
    { provide: MetricsConfig, useClass: class ExtendedMetricsConfig { ... } } 
) 
export class DatavizComponent ... 

有沒有真正的在這種情況下需要使MetricsConfig成爲一類。它也可以是一個OpaqueToken值提供者。但是一個類可以方便地擴展，它更容易注入並且已經提供了一個輸入界面。

Answer 2

你可以說，不支持作爲提供商鍵加入了對原始值@Optional()（DI）和?（打字稿），並@Inject(somekey)可選參數

@Injectable() 
export class MetricsService { 
    constructor(
     private http: Http, 
     @Inject('wsAuthKey') @Optional() public wsAuthKey?: string, 
     @Inject('wsHost') @Optional() public wsHost?: string 
     ) { 
     this.wsAuthKey = wsAuthKey || "blahblahblahblahblahblahblahblah="; 
     this.wsHost  = wsHost || "https://preprod-admin.myservice.ws"; 
    } 

providers: [ 
    {provide: 'wsAuthKey', useValue: 'abc'}, 
    {provide: 'wsHost', useValue: 'efg'}, 
] 

如果他們它們通過，否則它們被忽略，但DI仍然可以注入MetricsService。