2

私はクラスを持っていますLayer:

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');
  }
}

私のコンポーネントで拡張しますLines：

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();
  }
}

ご覧のとおり、Gameから継承するすべてのコンポーネントにサービスを注入する必要がありLayerます。ただし、クラスにサービスを注入したいLayerので、それを使用してサービスに依存するメソッドを作成できます。また、毎回自分でコンポーネントにサービスを注入する必要はありません。

言うまでもなく、Layerコンポーネントにサービスを注入しても機能しません。

angular 2.0.0-beta.0 を使用しています

4

2 に答える 2

2

拡張クラスで行ったのと同じようにコンストラクターを基本クラスに追加しLayer、依存関係をsuperメソッドのパラメーターとして送信します。

export class Layer implements AfterViewInit {
    constructor(public game: Game) {
        console.log(game);
    }
}

export class Lines extends Layer {
  constructor(public game: Game) {
    super(game);
  }
}
于 2016-01-15T16:33:43.597 に答える
0

Angular でサポートされていないものだと思います。注入するものを定義するには、コンポーネントのレベルでコンストラクターが必要です...

サンプルの使用:

export class Layer {
  constructor(public game: Game) {
  }
}

@Component({
  (...)
})
export class Lines extends Layer {
  (...)
}

クラスのトランスパイルされたファイルをLines見ると、gameパラメーターが Lines コンストラクター関数にGame存在し、サービスが関数の 2 番目のパラメーター (コンポーネントのプロバイダーのリスト) に存在しないことがわかり__metadataます。

Lines = (function (_super) {
  __extends(Lines, _super);
  function Lines() { // <------------------
    _super.apply(this, arguments);
  }
  Lines = __decorate([
    core_1.Component({
      selector: 'lines-component',
      template: "\n    lines\n  ",
      styles: ["\n    canvas {\n      z-index: 2;\n    }\n  "]
    }), 
    __metadata('design:paramtypes', []) // <------------------
  ], Lines);
  return Lines;
})(app_layer_component_1.Layer);

constructor(public game: Game)一方、Linesクラスで定義するときにそれを持っています：

Lines = (function (_super) {
  __extends(Lines, _super);
  function Lines(game) { // <------------------
    this.game = game;
  }
  Lines = __decorate([
    core_1.Component({
      selector: 'lines-component',
      template: "\n    lines\n  ",
      styles: ["\n    canvas {\n      z-index: 2;\n    }\n  "]
    }), 
    __metadata('design:paramtypes', [app_game_service_1.Game]) // <------------------
  ], Lines);
  return Lines;
})(app_layer_component_1.Layer);

お役に立てば幸いです、ティエリー

于 2016-01-15T16:44:22.030 に答える