Как использовать холст в Angular2?

Общее приближение к использованию canvas в javascript выглядит так:

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

но в Angular2 я не могу получить объект HTMLCanvasElement, var "canvas" получает только HTMLElement в Angular2. Итак, как использовать холст в Angular2? И, кроме того, как использовать сторонний javascript в Angular2 с языком TypeScript?

Ответ 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 имеет преимущество перед запросом DOM после компиляции приложения. Angular уже заранее знает, на какой элемент он должен внести изменения, вместо того, чтобы искать его в DOM.

Для полного примера проверьте это демо

Обновить

Для угловых 8 вам нужно использовать ViewChild как это.

@ViewChild('myCanvas', {static: false}) myCanvas: ElementRef;

См. Как мне использовать новую статическую опцию для @ViewChild в Angular 8? для дополнительной информации

Ответ 2

Вы ищете что-то вроде этого?

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