Доступ к элементу в компоненте Angular2 JavaScript ES5

Question

Редактировать: Поскольку большинство комментариев до сих пор дают мне решение TypeScript, я чувствую, что мне нужно повторить здесь: Использование JavaScript ES5.

Я хочу создать компонент холста, где я рисую данные на основе связанного свойства. Как я могу сделать это в Angular2 с помощью JavaScript?

Мой подход с угловым 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 является способом вызова ViewChild

В то время как с TS вы можете использовать непосредственно аннотацию @ViewChild, в ES5 вы должны использовать параметр queries в компоненте

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() было названо canvas инициализируется ElementRef. С canvas.nativeElement вы можете получить доступ к элементу <canvas>.