如何编写需要角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。