Javascript angular2在更改detetion后在画布上绘制图像

我有一个angular2组件：

@Component({
    selector: 'my-image',
    template: `
    <img #img src="{{src}}" style='display: none;' />
    <canvas #canvas width="{{width}}" height="{{height}}"></canvas>`
})
export class ImageComponent implements AfterViewInit {
    @ViewChild('canvas') canvas: ElementRef;
    @ViewChild('img') img: ElementRef;

    private ctx: CanvasRenderingContext2D;
    private element: HTMLImageElement;
    src: string;
    width: number;
    height: number;

    constructor(canvas: ElementRef, img: ElementRef) {
        this.width = window.innerWidth;
        this.height = window.innerHeight;
        this.src = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
    }
    ngAfterViewInit() {
        this.ctx = this.canvas.nativeElement.getContext('2d');
        this.element = this.img.nativeElement;
    }
    @HostListener('window:resize')
    resize() {
        this.width = window.innerWidth;
        this.height = window.innerHeight;
        this.render();
    }
    clear() {
        this.ctx.clearRect(0, 0, this.width, this.height);
    }
    render() {
        this.clear();
        this.ctx.drawImage(this.element, 0, 0, 400, 400);
    }
}

@组件({
选择器：“我的图像”，
模板：`
`
})
导出类ImageComponent实现AfterViewInit{
@ViewChild（“画布”）画布：ElementRef；
@ViewChild（'img'）img:ElementRef；
私人ctx:CanvasRenderingContext2D；
私有元素：HTMLImageElement；
src：字符串；
宽度：数字；
高度：数字；
构造函数（canvas:ElementRef，img:ElementRef）{
this.width=window.innerWidth；
this.height=window.innerHeight；
这个.src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';
}
ngAfterViewInit（）{
this.ctx=this.canvas.nativeElement.getContext（'2d'）；
this.element=this.img.nativeElement；
}
@HostListener（'窗口：调整大小'）
调整大小（）{
this.width=window.innerWidth；
this.height=window.innerHeight；
这个。render（）；
}
清除（）{
this.ctx.clearRect（0，0，this.width，this.height）；
}
render（）{
这个.clear（）；
this.ctx.drawImage（this.element，0,040400）；
}
}

所以一切都很好，但是，当我调整窗口大小时，resize回调会被点击并调用render。然后画布上的绑定会重置上下文，留下空白画布。我最初的想法是在检测到更改后再次调用render。这是正确的方法还是有更好的方法

---

谢谢

@rinukkusu回答正确，谢谢

可能尝试在

ngAfterViewChecked

---

可能尝试调用

ngAfterViewChecked

中的

render

方法。