angular2のdrawImageキャンバスに変更detetion

Question

後、私は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); 
    } 
} 

をだから、すべては私がウィンドウのサイズを変更する場合ただし、サイズ変更コールバックが打撃を受けるとの通話は、レンダリング、素晴らしい作品。次に、キャンバス上のバインディングが発生し、コンテキストがリセットされ、空白のキャンバスが残されます。私の最初の考えは、変更検出が発生した後にレンダリングを再度呼び出すことでした。それは正しいアプローチですか、それとも良い方法ですか？ @rinukkusuの答えが正しいか

おかげ

Answer 1

は、ありがとうございました！

たぶん、たぶんngAfterViewChecked` `で` render`メソッドを呼び出してみてくださいngAfterViewChecked