web-dev-qa-db-fra.com

Comment utiliser la toile dans Angular2?

L'approche courante pour utiliser canvas en javascript est la suivante:

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

mais dans Angular2, je ne peux pas obtenir l'objet HTMLCanvasElement, le var "canvas" ne récupère que le HTMLElement dans Angular2. Alors, comment utiliser canvas dans Angular2? Et en outre, comment utiliser le code javascript tiers dans Angular2 avec le langage TypeScript?

javascriptangulartypescripthtml5-canvas
21
stephzcj

Si vous ne voulez pas contrarier les dieux angular, utilisez @ViewChild

Dans votre code HTML, ajoutez une référence de modèle.

<canvas #myCanvas></canvas>

Dans ta classe, fais ce qui suit.

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');
}

Essayez de ne pas utiliser le document autant que vous le pouvez car il pourrait vous mordre à long terme. Aussi en utilisant @ViewChild présente un avantage sur l'interrogation du DOM une fois l'application compilée. Angular sait déjà à l’avance sur quel élément il doit effectuer les modifications, au lieu de le trouver dans le DOM.

Pour un exemple complet, consultez ceci démo

Mettre à jour

Pour angular 8, vous devez utiliser ViewChild comme ceci.

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

Voir Comment utiliser la nouvelle option statique pour @ViewChild dans Angular 8? pour plus d'informations

59
realappie