title: How to inject service to class and then extend component with it?
body: <p>I have class <code>Layer</code>:</p>
  
  <pre><code>import {AfterViewInit, ViewChild} from 'angular2/core';
  
  
  export class Layer implements AfterViewInit {
    @ViewChild('element') element;
  
    public canvas: HTMLCanvasElement = null;
    public context: CanvasRenderingContext2D = null;
  
    ngAfterViewInit() {
      this.canvas = this.element.nativeElement;
      this.context = this.canvas.getContext('2d');
    }
  }
  </code></pre>
  
  <p>which I will be extending with my component <code>Lines</code>:</p>
  
  <pre><code>import {Component} from 'angular2/core';
  
  import {Layer} from './layer';
  import {Game} from '../../providers/Game';
  
  
  @Component({
    selector: 'lines-component',
    template: require('./template.html'),
    styles: [`
      canvas {
        z-index: 2;
      }
    `]
  })
  export class Lines extends Layer {
    constructor(public game: Game) {
      super();
    }
  }
  </code></pre>
  
  <p>As you can see, I have to inject <code>Game</code> service to every component which will inherit from <code>Layer</code>. However, I would like to inject service to <code>Layer</code> class, so I can use it to create methods which depends on the service, and also it won't force me to inject service to the component on my own every single time.</p>
  
  <p>Needless to say, injecting service to <code>Layer</code> as I would to any component is not working.</p>
  
  <p>I am using angular 2.0.0-beta.0</p>