title: How to inject different service token in the same component?
body: <p>I have component <strong>A</strong>, <strong>B</strong>, <strong>C</strong> and service <strong>S</strong>.</p>
  
  <p><strong>A</strong> and <strong>B</strong> change a value in service <strong>S</strong>.</p>
  
  <p>Component <strong>C</strong> are used twice in different places of the website, so it needs to read different value from service <strong>S</strong>.</p>
  
  <p>In two component <strong>C</strong>, I want one uses token <code>tokenFromA</code>, another uses <code>tokenFromB</code>.</p>
  
  <p>How to inject different service token in the same component? Thanks</p>
  
  <p>// <strong>Service S</strong></p>
  
  <pre><code>export class Service {
      text:string = '';
  }
  </code></pre>
  
  <p>// <strong>Component C</strong></p>
  
  <pre><code>@Component({
      selector: 'c-component',
      providers: [provide("tokenFromA", {useClass: Service})],
      template: `
          &lt;h1&gt;App&lt;/h1&gt;
      `
  })
  export class ComponentC {
      constructor(@Inject('tokenFromA') service:Service) {
      }
  }
  </code></pre>