Angular2 компонент на основе холста: как рисовать внутри?

Я написал простой компонент, основанный на холсте, который я изменяю с помощью свойства Input() внутри класса сопутствующего класса (TypeScript). То, что я хотел бы сделать, - это нарисовать элемент canvas внутри класса компаньона, код которого ниже: какой самый простой способ достичь этого? (Пожалуйста, см. Комментарий в коде: Я хотел бы нарисовать синий прямоугольник внутри холста от конструктора).

import {Component, View, Input} from 'angular2/core';

@Component({
    selector: 'chess-diagram',
})
@View({
    template: `<canvas class='chess-diag'
     [attr.width]='_size'
     [attr.height]='_size'></canvas>`,
})
export class ChessDiagram {
    private _size: number;

    constructor(){
        this._size = 150;
        // Here I would like to draw a blue rectangle inside the canvas.
    }

    get size(){
        return this._size;
    }

    @Input () set size(newValue: number){
        this._size = Math.floor(newValue);
    }
}

import {Component, View, Input, ViewChild, ElementRef} from 'angular2/core'; @Component({ selector: 'chess-diagram', }) @View({ template: `<canvas #chessCanvas class='chess-diag' [attr.width]='_size' [attr.height]='_size'></canvas>`, }) export class ChessDiagram { private _size: number; // get the element with the #chessCanvas on it @ViewChild("chessCanvas") chessCanvas: ElementRef; constructor(){ this._size = 150; } ngAfterViewInit() { // wait for the view to init before using the element let context: CanvasRenderingContext2D = this.chessCanvas.nativeElement.getContext("2d"); // happy drawing from here on context.fillStyle = 'blue'; context.fillRect(10, 10, 150, 150); } get size(){ return this._size; } @Input () set size(newValue: number){ this._size = Math.floor(newValue); } }

Ответ 1