three.js et Angulaire - la fonction n'est pas définie

Question

J'ai développé une application simple qui rend un cube avec Angular 4 et three.js. J'ai un composant angulaire appelé ViewerComponent, où le cube est rendu. Le code de cette composante utile à ma question est la suivante (le code de la méthode init ne figure pas ici pour plus de simplicité):

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

} 

Je voudrais un message à afficher dans la console du navigateur lorsque la taille la fenêtre du navigateur est modifiée. En essayant d'implémenter cette fonctionnalité, j'ai trouvé l'erreur suivante.

Lorsque j'exécute mon application et modifie la taille de la fenêtre du navigateur, l'erreur suivante est déclenchée: ERROR TypeError: this.Callback_Method is not a function. Cependant, si je change le code de la méthode onWindowResize à ce qui suit, je reçois le comportement attendu:

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

Je suis très nouveau pour frontend technologies et three.js, et maintenant je suis complètement perdu. Quelqu'un at-il des idées sur pourquoi cela pourrait-il être hapenning? Merci d'avance.

Answer 1

Vous pouvez utiliser HostListener pour obtenir les événements 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!"); 
    } 
}