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

общий подход к использованию canvas в javascript выглядит так:

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

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

6
angular canvas javascript typescript

2 ответов

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

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

29

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

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