Angular2 में कैनवास का उपयोग कैसे करें?

Question

आम जावास्क्रिप्ट में कैनवास का उपयोग करने के करीब पहुंच की तरह है:

var canvas = document.getElementById('tutorial'); 
var ctx = canvas.getContext('2d'); 

लेकिन Angular2 में मैं HTMLCanvasElement वस्तु, वर "कैनवास" केवल Angular2 में HTMLElement नहीं मिल सकता है। तो Angular2 में कैनवास का उपयोग कैसे करें? और इसके अलावा, भाषा टाइपस्क्रिप्ट के साथ Angular2 में तृतीय-पक्ष जावास्क्रिप्ट का उपयोग कैसे करें?

Answer 1

आप, कोणीय देवताओं परेशान @ViewChild

का उपयोग अपने HTML में करने के लिए एक टेम्पलेट संदर्भ जोड़ने नहीं करना चाहते हैं।

<canvas #myCanvas></canvas>

अपनी कक्षा में निम्नलिखित है।

import { ViewChild, ElementRef } from '@angular/core'; 
... 
// Somewhere above your class constructor 

@ViewChild('myCanvas') myCanvas: ElementRef; 
public context: CanvasRenderingContext2D; 


// Somewhere under the class constructor we want to wait for our view 
// to initialize 

ngAfterViewInit(): void { 
    this.context = (<HTMLCanvasElement>this.myCanvas.nativeElement).getContext('2d'); 
} 

जितना संभव हो सके दस्तावेज़ का उपयोग करने से दूर रहने की कोशिश करें, क्योंकि यह आपको लंबे समय तक काट सकता है। एक बार एप्लिकेशन संकलित होने के बाद, @ViewChild का उपयोग डीओएम से पूछताछ करने पर एक लाभ है। कोणीय पहले से ही जानता है कि डीओएम में इसे ढूंढने के बजाय इसे किस तत्व को संशोधित करने की आवश्यकता है।

की जाँच के लिए एक पूर्ण उदाहरण के लिए इस demo

Answer 2

क्या आप ऐसा कुछ ढूंढ रहे हैं?

var canvas: HTMLCanvasElement = <HTMLCanvasElement> document.getElementById('tutorial'); 
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");