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

有关完整示例，请查看此demo

Answer 2

你正在寻找这样的东西吗？

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

如何在Angular2中使用画布？

2 个答案: