Question

我正在玩createjs和angular。当我的图像加载时，我正在尝试更新（）我的舞台。我相信我在这里遇到了一个角度问题。当Bitmap对象上的load事件完成并且其回调运行时，未定义stage对象。事实上，创建事件的Bitmap对象报告为未定义（请参阅下面的示例代码）。

来自HTML中的onClick等引发的事件不会遇到同样的问题，而toString（）方法会返回有关该对象的一些信息。

我相信我不是在理解DI原则或其他东西。我玩了很多，找不到答案或提出解决方案。感谢您的帮助。

Angular version information:
Angular CLI: 1.6.6
Node: 8.9.4
OS: win32 x64
Angular: 5.2.2
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.6
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.6
@schematics/angular: 0.1.17
typescript: 2.5.3
webpack: 3.10.0

通过以下方式安装createjs：npm install createjs-module --save

import {Component, OnInit} from '@angular/core';
import * as createjs from 'createjs-module';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit  {
  bmp: createjs.Bitmap;

  ngOnInit(): void {
    this.bmp = new createjs.Bitmap('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/SIPI_Jelly_Beans_4.1.07.tiff/lossy-page1-220px-SIPI_Jelly_Beans_4.1.07.tiff.jpg');
    this.bmp.image.onload = this.bmpOnLoad;
    this.bmp.name = 'BmpName';
  }

  bmpOnLoad(): void {
    console.log(this.bmp.toString());
  }
}

控制台出现错误Cannot read property 'toString' of undefined

Answer 1

归功于@ericmartinezr的角度/角度。

Eric给了我以下代码片段，这些代码片段解决了在回调中引用“this”属性失败的事实：

this.bmp.image.onload = () => this.bmpOnLoad();

或

this.bmp.image.onload = this.bmpOnLoad.bind(this);

我希望能够解释为什么会这样。是不是有一个单独的组件被引用？为什么回调可以访问在通过其他方式可用时未初始化的对象？

Angular Component中的对象在其事件调用callback

1 个答案: