Javascript 基于画布的Angular2组件：如何绘制内部？

我编写了一个基于画布的简单组件，我正在使用伴生类（TypeScript代码）中的Input（）属性调整其大小。我想做的是在companion类中绘制canvas元素，其代码如下：实现这一点的最简单方法是什么？（请参见代码中的注释：我想在画布中从构造函数中画一个蓝色矩形）

从'angular2/core'导入{组件、视图、输入}；
@组成部分({
选择器：'象棋图'，
})
@看法({
模板：``，
})
导出类棋盘图{
私人_大小：数字；
构造函数（）{
这个。_尺寸=150；
//在这里，我想在画布内画一个蓝色的矩形。
}
获取大小（）{
返回此。\u大小；
}
@输入（）设置大小（newValue:number）{
此._size=Math.floor（newValue）；
}
}

您可以使用ViewChild注释获取画布元素的实例。在那之后，一切都是香草味的

从'angular2/core'导入{Component，View，Input，ViewChild，ElementRef}；
@组成部分({
选择器：'象棋图'，
})
@看法({
模板：``，
})
导出类棋盘图{
私人_大小：数字；
//获取带有#chessCanvas的元素
@ViewChild（“chessCanvas”）chessCanvas:ElementRef；
构造函数（）{
这个。_尺寸=150；
}
ngAfterViewInit（）{//在使用元素之前，等待视图初始化
let context:CanvasRenderingContext2D=this.chessCanvas.nativeElement.getContext（“2d”）；
//从现在开始画得很开心
context.fillStyle='blue'；
fillRect（10,10,150,150）；
}
获取大小（）{
返回此。\u大小；
}
@输入（）设置大小（newValue:number）{
此._size=Math.floor（newValue）；
}
}

---

@ViewChild将返回一个，您可以使用nativeElement属性从中获取本机画布元素。

谢谢您的回答。但是我得到的chessCanvas变量是未定义的。在ngAfterViewInit中，某个地方可能有输入错误。我将设置一个组件并检查它是否工作。：）谢谢你，我也在找它。修好了。事实证明@ViewChild返回的是ElementRef，而不是元素本身。我会用这些信息更新问题。是的。非常感谢：）

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