javascript - 如何在 Angular 中使用 Canvas

Question

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

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

但在 Angular2 中我无法获取 HTMLCanvasElement 对象，var“canvas”只能在 Angular2 中获取 HTMLElement。那么如何在Angular2中使用canvas呢？还有，如何在Angular2中使用TypeScript语言使用第三方javascript？

Answer 1

您可以使用 @ViewChild 来完成此操作

在您的类里面执行以下操作。

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
   name: 'my-component',
   // notice the variable name myCanvas
   template: `<canvas #myCanvas></canvas>`
})
export class myComponent implements AfterViewInit {
  // its important myCanvas matches the variable name in the template
  @ViewChild('myCanvas')
  myCanvas: ElementRef<HTMLCanvasElement>;

  public context: CanvasRenderingContext2D;

  ngAfterViewInit(): void {
    this.context = this.myCanvas.nativeElement.getContext('2d');
  }
}

尽量避免使用 document，因为从长远来看它可能会伤害您。在应用程序编译后，使用 @ViewChild 也比查询 DOM 有优势。 Angular 已经提前知道它需要对哪个元素进行修改，而不必在 DOM 中找到它。

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

---

更新

对于 Angular 8，您需要像这样使用 ViewChild。

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

参见 How should I use the new static option for @ViewChild in Angular 8?了解更多信息