three.jsとAngular - 関数が定義されていません

Question

私は角度4とthree.jsでキューブをレンダリングする簡単なアプリケーションを開発しました。 ViewerComponentと呼ばれる角型コンポーネントがあり、キューブがレンダリングされます。私の質問に関連して、このコンポーネントのコードは、以下の（initメソッドのコードを簡単にするためにここに含まれていません）です。

import { Component, AfterViewInit } from '@angular/core'; 
import * as THREE from 'three'; 

@Component({ 
    moduleId: module.id, 
    templateUrl: 'viewer.component.html', 
    styleUrls: ['viewer.component.css'], 
}) 

export class ViewerComponent implements AfterViewInit{ 

    constructor() { } 

    ngAfterViewInit(){ 
     this.init(); 
    } 

    init(){ 
     // define camera, scene, cube, renderer, etc 
    } 

    Callback_Method(){ 
     console.log("RESIZE!"); 
    } 

    onWindowResize(){ 
     this.Callback_Method(); 
    } 

} 

私はサイズのブラウザコンソールに表示されるメッセージを希望しますブラウザのウィンドウが変更されます。この機能を実装しようとすると、次のエラーが見つかりました。

アプリケーションを実行してブラウザのウィンドウのサイズを変更すると、次のエラーが発生します。ERROR TypeError: this.Callback_Method is not a function私は次のようにメソッドonWindowResizeのコードを変更する場合は、私が期待される動作を取得：

onWindowResize(){ 
    console.log("RESIZE!"); 
} 

私は技術やthree.jsをフロントエンドに非常に新しいです、そして今、私は完全に失われています。なぜ誰かがこのことを拒否することができますか？前もって感謝します。

Answer 1

あなたはそんなにありがとう、DOMイベント

import { Component, AfterViewInit, HostListener } from '@angular/core'; 

export class ViewerComponent implements AfterViewInit{ 

    @HostListener('window:resize', ['$event']) 
    onResize(event: Event) { 
     this.Callback_Method(); 
    } 

    constructor() { } 

    Callback_Method(){ 
    console.log("RESIZE!"); 
    } 
}