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?

Author: Avazbek Ismanov, 2017-06-08
Source

2 answers

Se não queres perturbar os deuses angulares, usa @ViewChild

No seu HTML adicione uma referência de modelo.

<canvas #myCanvas></canvas>

Na sua turma, faça o seguinte. 
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.

Para um exemplo completo, veja esta demonstração

 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