Cách sử dụng canvas trong Angular2?

Question

Phổ biến tiếp cận sử dụng vải trong javascript như:

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

nhưng trong Angular2 tôi không thể có được đối tượng HTMLCanvasElement, var "vải" chỉ nhận được các phần tử html trong Angular2. Vậy làm thế nào để sử dụng canvas trong Angular2? Và hơn nữa, làm thế nào để sử dụng javascript của bên thứ ba trong Angular2 với ngôn ngữ TypeScript?

Answer 1

Nếu bạn không muốn gây khó khăn các vị thần góc, sử dụng @ViewChild

Trong HTML của bạn thêm một mẫu tham khảo.

<canvas #myCanvas></canvas>

Trong lớp học, hãy làm như sau.

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

Cố gắng tránh xa việc sử dụng tài liệu nhiều nhất có thể, vì nó có thể ảnh hưởng đến bạn lâu dài. Cũng sử dụng @ViewChild có lợi thế hơn khi truy vấn DOM, khi ứng dụng được biên dịch. Góc đã biết trước thời gian mà yếu tố nó cần phải thực hiện các sửa đổi trên, thay vì phải tìm nó trong DOM.

Đối với một ví dụ đầy đủ kiểm tra này demo

Answer 2

bạn có tìm kiếm thứ gì đó như thế này không?

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