Angular2 JavaScriptのES5コンポーネントに

Question

編集を要素へのアクセス：JavaScriptのES5の使用：ほとんどのコメントは今のところ私に活字体の溶液を得たとして、私は私がここで繰り返す必要があります感じています。

私はバウンドプロパティに基づいてデータを描画キャンバスコンポーネントを、作成したいです。 JavaScriptを使用してAngular2でこれを行うにはどうすればよいですか？角度1と

私のアプローチは、ディレクティブの要素の参照を取得することですが、私はこれが今行われることになっているかを知ることができません。ここで

が動作しているようなアプローチであるが、私はこれをやった後、私の手を洗うように感じる：

(function (app) { 
    app.DrawingComponent = ng.core 
     .Component({ 
      selector: 'my-drawing', 
      template: '<div><canvas id="{{randomId}}"></canvas></div>' 
     }) 
     .Class({ 
      constructor: function() { 
       this.randomId = "canvas" + Math.random(); 
      }, 
      ngAfterViewInit: function() { 
       var canvas = document.getElementById(this.randomId); 
       console.log(canvas); 
      } 
     }); 
})(window.app || (window.app = {})); 

Answer 1

私が参照さTS solutionの唯一の違い、およびES5はTSであなたがES5に直接注釈@ViewChildを、使用することができますが、あなたがコンポーネント

で queriesパラメータを使用する必要が

ViewChildを呼び出す方法です

app.DrawingComponent = ng.core 
    .Component({ 
     selector: 'my-drawing', 
     template: '<div><canvas #myCanvas></canvas></div>', 

     // Check here! This is important! 
     queries : { 
      myCanvas : new ng.core.ViewChild('myCanvas') 
     } 
    }) 
    .Class({ 
     constructor: function() {}, 
     ngAfterViewInit: function() { 
      console.log(this.myCanvas); 
     } 
    }); 

ここには、使用方法を示すplnkrがあります。もう少しの使い方を理解するのに役立つ別のanswerがあります。

Answer 2

私は非活字体構文が何であるかわからないんだけど、私はあなたの確信しています自分自身を知っている。

これ、私はそれをやった方法です：

export class Navigation { 

    constructor(elementRef: ElementRef) { 
     // elementRef.nativeElement is the actual element 
    } 
} 

Answer 3

要素にテンプレート変数（ '#canvas'）を追加

template: '<div><canvas #canvas id="{{randomId}}"></canvas></div>' 

使用@ViewChild注釈

@ViewChild('canvas') canvas; 

AfterViewInitを実装し、かつngAfterViewInit()後と呼ばれていました210フィールドはElementRefで初期化されます。 canvas.nativeElementを使用すると、<canvas>要素にアクセスすることができます。