title: How to write a service that requires constructor parameters?
body: <p>I have a component that declares the <code>MetricsService</code> service. This service requires both <code>HttpModule</code> plus two <code>string</code>s that defines the host and the auth key to use.</p>
  <p>The metrics service is as follows:</p>
  <pre class="lang-js prettyprint-override"><code>    @Injectable()
      export class MetricsService {
          constructor(
              private http: Http,
              public wsAuthKey: string,
              public wsHost: string
              ) {
              this.wsAuthKey  = wsAuthKey || &quot;blahblahblahblahblahblahblahblah=&quot;;
              this.wsHost     = wsHost    || &quot;https://preprod-admin.myservice.ws&quot;;
          }
  </code></pre>
  <p>The component that uses it is written as follows:</p>
  <pre class="lang-js prettyprint-override"><code>    export class DatavizComponent implements OnInit, OnChanges {
          constructor(
              private zms: MetricsService,
          ) { 
          }
  </code></pre>
  <p>My question is how should I write the component constructor so that the whole thing works, including passing the host and key (but not passing the http)?</p>
  <p>Note : The code as currently written does not compile.</p>
  <p>To be more precise, I would expect the component to provided app-depending data something like this:</p>
  <pre class="lang-js prettyprint-override"><code>     export class DatavizComponent implements OnInit, OnChanges {
              constructor(
                  private zms = MetricsService(&quot;http://myhost.com&quot;, &quot;mykey&quot;),
              ) { 
              }
  </code></pre>
  <p>But if this works, how to pass http?</p>
  <p>UPDATE AFTER PROPOSED SOLUTION:</p>
  <pre class="lang-js prettyprint-override"><code>    export class MetricsService {
      
          constructor(
              private http: Http,
              @Inject('wsAuthKey') @Optional() public wsAuthKey?: string,
              @Inject('wsHost') @Optional() public wsHost?: string
              ) {
              this.wsAuthKey  = wsAuthKey || &quot;blahblah=&quot;;
              this.wsHost     = wsHost    || &quot;https://preprod-admin.host.ws&quot;;
      
      
              console.log(&quot;MetricsService constructor=&quot;
                  + &quot; wsAuthKey=&quot;+this.wsAuthKey
                  + &quot;, wsHost=&quot;+this.wsHost
              );
      
          }
  </code></pre>
  <p>In the component:</p>
  <pre class="lang-js prettyprint-override"><code>    @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
          ) { 
          }
  </code></pre>
  <p>In the constructor, the log are as follows (value are not passed):</p>
  <pre><code>    MetricsService constructor= wsAuthKey=blahblah=, wsHost=https://preprod-admin.host.ws
  </code></pre>
  <p>where it should show 'abc' and 'efg'.</p>
  <p>But I wonder if there is not an issue with the component that use dataviz componenet.
  In this component, the following information have been passed:</p>
  <pre class="lang-js prettyprint-override"><code>    @Input() private wsAuthKey:string;
      @Input() private wsHost:string;
  </code></pre>
  <p>As I would like the tag to optionally preset the host and key:</p>
  <pre class="lang-html prettyprint-override"><code>                    &lt;h1&gt;dataviz volume&lt;/h1&gt;
                      &lt;div class=&quot;chartContainer left&quot; title=&quot;Simultaneous offers via dataviz directive&quot;&gt;
                          &lt;dataviz-offers-volumes 
                              id=&quot;dataviz-volumes1&quot;
                              [graphId]=&quot;graphId&quot;
                              [wsAuthKey]=&quot;'myauthkey'&quot;
                              [wsHost]=&quot;'http://myhost.com'&quot;
                              [maxSamples]=&quot;123&quot;
                          &gt;
                          &lt;/dataviz-offers-volumes&gt;
                      &lt;/div&gt;
  </code></pre>