javascript - Hur man använder canvas i Angular

Det vanliga sättet att använda canvas i JavaScript är som:

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

men i Angular2 kan jag inte få HTMLCanvasElement-objektet, variabeln "canvas" får bara HTMLElement i Angular2. Så hur använder man canvas i Angular2? Och vidare, hur använder man tredjeparts JavaScript i Angular2 med språket TypeScript?

Svar #1

Du kan uppnå detta genom att använda @ViewChild

Gör följande i din klass.

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')
  canvas: ElementRef<HTMLCanvasElement>;

  context: CanvasRenderingContext2D;

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

Försök att undvika att använda document så mycket du kan, eftersom det kan ställa till problem på lång sikt. Att använda @ViewChild har också en fördel jämfört med att fråga DOM:en, när applikationen är kompilerad. Angular vet redan i förväg vilket element det behöver göra ändringarna på, istället för att behöva hitta det i DOM:en.

För ett fullständigt exempel, kolla in den här demon

Uppdatering

För Angular 8 behöver du använda ViewChild på detta sätt.

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

Se Hur ska jag använda det nya statiska alternativet för @ViewChild i Angular 8? för mer information

Svar #2

Detta fungerar för mig i Angular 13

@ViewChild('myCanvas')
private myCanvas: ElementRef = {} as ElementRef;

Jag har försökt med realappies lösning men det visade fortfarande ett fel för mig

Relaterade artiklar