Jak korzystać z płótna w Angular2?

Question

Wspólna zbliża użyć płótna w javascript jest jak:

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

ale w Angular2 nie mogę uzyskać obiekt HTMLCanvasElement VaR „płótna” tylko uzyskać HTMLElement w Angular2. Jak korzystać z płótna w Angular2? Co więcej, jak używać zewnętrznego javascript w Angular2 z językiem TypeScript?

Answer 1

Jeśli nie chcesz, aby zdenerwować kątowych bogów, użyj @ViewChild

w HTML dodać odwołanie szablonu.

<canvas #myCanvas></canvas>

W swojej klasie wykonać następujące czynności.

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

Staraj się trzymać z dala od używania dokumentu jak można, jak to może cię ugryźć na dłuższą metę. Również użycie @ViewChild ma przewagę nad przeszukiwanie DOM, po skompilowaniu aplikacji. Angular już wie z wyprzedzeniem, który element musi wykonać modyfikacje, zamiast szukać go w DOM.

Aby uzyskać pełną przykład sprawdzić ten demo

Answer 2

Szukasz czegoś takiego?

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