three.js 和 Angular - 函数未定义

Question

我开发了一个简单的应用程序，它使用 Angular 4 和 three.js 渲染立方体。我有一个名为 ViewerComponent 的 Angular 组件，其中呈现了多维数据集。与我的问题相关的该组件的代码如下（为简单起见，此处未包含 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();
    }

}

当浏览器 window 的大小发生变化时，我希望在浏览器控制台中显示一条消息。尝试实现此功能时，我发现了以下错误。

当我运行我的应用程序，并更改浏览器 window 的大小时，出现以下错误：ERROR TypeError: this.Callback_Method is not a function。但是，如果我将方法 onWindowResize 的代码更改为以下内容，我会得到预期的行为：

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

我对前端技术和 three.js 非常陌生，现在我完全迷失了。有没有人知道为什么会发生这种情况？提前致谢。

Answer 1

您可以使用 HostListener 获取 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!");
  }
}

three.js 和 Angular - 函数未定义

three.js and Angular - function is not defined

frontend

three.js

angular-components

angular