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

}

我想在浏览器窗口大小发生变化时在浏览器控制台中显示一条消息。尝试实现此功能，我发现以下错误。

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

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

我对前端技术和three.js非常陌生，现在我完全迷失了。有没有人有任何想法为什么这可能是hapenning？提前谢谢。

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 - 函数未定义

1 个答案: