Truy cập phần tử trong thành phần Angular2 JavaScript ES5

Question

Chỉnh sửa: Vì hầu hết các nhận xét cho đến nay cung cấp cho tôi giải pháp TypeScript, tôi cảm thấy tôi cần lặp lại ở đây: Sử dụng JavaScript ES5.

Tôi muốn tạo thành phần canvas, nơi tôi vẽ dữ liệu dựa trên thuộc tính bị ràng buộc. Làm thế nào tôi có thể làm điều này trong Angular2 sử dụng JavaScript?

Cách tiếp cận của tôi với Angular 1 sẽ là lấy tham chiếu phần tử trong chỉ thị, nhưng tôi không thể tìm hiểu cách thực hiện điều này.

Dưới đây là một cách tiếp cận mà dường như để làm việc, nhưng tôi cảm thấy như rửa tay sau khi làm điều này:

(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

Sự khác biệt duy nhất giữa TS solution Tôi tham chiếu, và ES5 là cách bạn gọi ViewChild

Trong khi với TS bạn có thể sử dụng trực tiếp các chú thích @ViewChild, trong ES5 bạn phải sử dụng tham số queries trong Component

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

Dưới đây là plnkr minh họa cách sử dụng. Có một answer khác có thể giúp bạn hiểu thêm một chút về cách sử dụng của nó.

Answer 2

Tôi không chắc chắn những gì cú pháp phi nguyên cảo là, nhưng tôi chắc chắn bạn biết rằng bản thân bạn.

Đây là cách tôi đã thực hiện nó:

export class Navigation { 

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

Answer 3

Thêm mẫu biến ('#canvas') để các yếu tố

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

Sử dụng @ViewChild chú thích

@ViewChild('canvas') canvas; 

Triển khai AfterViewInit và sau ngAfterViewInit() được gọi làTrường 210 được khởi tạo với một số ElementRef. Với canvas.nativeElement bạn có thể truy cập phần tử <canvas>.