如何在Angular2中使用画布？

Question

在javascript中使用canvas的常见方法是:

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

但是在Angular2中我无法获取HTMLCanvasElement对象,var"canvas"只获取Angular2中的HTMLElement.那么如何在Angular2中使用canvas？此外,如何使用Angular2中的第三方javascript使用TypeScript语言？

Answer 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中找到它.

有关完整示例,请查看此演示