Como usar tela em Angular2?
a aproximação comum para usar tela em javascript é como:
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
Mas em Angular2 não consigo obter o objeto HTMLCanvasElement, o var "canvas" só consegue o HTMLElement em Angular2. Então como usar tela em Angular2?
E, além disso, como usar o javascript de terceiros em Angular2 com o tipo de linguagem?
6
Author: Avazbek Ismanov, 2017-06-08
2 answers
Se não queres perturbar os deuses angulares, usa
@ViewChild
No seu HTML adicione uma referência de modelo.
<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');
}
Tente ficar longe de usar o documento o máximo que puder, pois pode morder - lhe a longo prazo. Também usar @ViewChild
tem uma vantagem sobre questionar o DOM, uma vez que a aplicação é compilada. Angular já sabe antes do Tempo em que elemento precisa fazer as modificações, em vez de ter que encontrá-lo no DOM.
29
Author: Abdel, 2018-01-29 10:16:12
Estás à procura de algo assim?
var canvas: HTMLCanvasElement = <HTMLCanvasElement> document.getElementById('tutorial');
var ctx: CanvasRenderingContext2D = canvas.getContext("2d");
-1
Author: Darky_Chan, 2017-06-08 05:39:55