Angular 5中能否使用Image.onload事件？附代码求技术帮助

当然可以在Angular 5中使用Image.onload事件啦！不过你当前的代码存在一个常见的上下文绑定问题，导致this的指向不符合预期，咱们一步步来解决：

在你写的onload普通函数回调里，this会指向Image实例本身，而不是你的组件类。这就意味着this._PreviewHelper、this.model这些你想访问的组件属性都会找不到，运行时肯定会抛出错误。

有几种实用的方法可以解决这个上下文问题，推荐按优先级选择：

方法1：使用箭头函数（最简洁推荐） #

箭头函数会自动继承外层的上下文（也就是你的组件实例），这样this就会精准指向组件，不会跑偏：

loadImage(path) { 
  this.loadedImage = new Image(); 
  this.loadedImage.crossOrigin = "Anonymous"; 
  this.loadedImage.src = path; 
  // 换成箭头函数，this指向组件实例
  this.loadedImage.onload = () => { 
    this._PreviewHelper.changeModelTexture(this.model, this.loadedImage); 
  } 
}

方法2：用bind()绑定上下文 #

如果你习惯用普通函数，可以通过bind()方法强制把回调的this绑定到组件实例：

loadImage(path) { 
  this.loadedImage = new Image(); 
  this.loadedImage.crossOrigin = "Anonymous"; 
  this.loadedImage.src = path; 
  // 绑定组件的this到回调函数
  this.loadedImage.onload = function () { 
    this._PreviewHelper.changeModelTexture(this.model, this.loadedImage); 
  }.bind(this); 
}

方法3：提前保存组件上下文 #

可以先把组件的this存到一个变量里，在回调里用这个变量访问组件属性：

loadImage(path) { 
  const self = this; // 保存组件的this引用
  this.loadedImage = new Image(); 
  this.loadedImage.crossOrigin = "Anonymous"; 
  this.loadedImage.src = path; 
  this.loadedImage.onload = function () { 
    self._PreviewHelper.changeModelTexture(self.model, self.loadedImage); 
  } 
}

• 别忘处理图片加载失败的情况，添加onerror回调做兜底：

this.loadedImage.onerror = () => {
  console.error(`图片加载失败：${path}`);
  // 这里可以加业务逻辑，比如显示默认占位图
};

• 确保_PreviewHelper是已经正确注入的服务，要在组件的构造函数里声明：

constructor(private _PreviewHelper: PreviewHelperService) { }

内容的提问来源于stack exchange，提问作者Devan Madlani