Angular 2中img标签onError调用组件方法的问题咨询

嘿，这个问题我之前做Angular项目时也踩过类似的坑，咱们来一步步拆解原因和解决办法～

首先先把你提供的原始代码整理出来，方便参考：

原始代码 #

test.component.html #

<img src="./assets/sample.jpeg" onError="setValue()"> {{imageMenu}}

test.component.ts #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  imageMenu: boolean = true;

  constructor() { }

  ngOnInit() { }

  setValue(): void {
    alert("hi");
    this.imageMenu = !this.imageMenu;
  }
}

为什么setValue()没法修改imageMenu？ #

核心问题出在原生DOM事件的回调上下文不对：

• 当你在模板里用原生的onError="setValue()"时，这个setValue()的调用上下文是触发事件的<img>DOM元素，而不是你的TestComponent实例。
• 所以在setValue方法里，this指向的是<img>标签，不是组件本身——你以为在修改组件的imageMenu，其实是给DOM元素新增了一个同名属性，完全和组件变量不沾边，自然无法更新视图。
• 另外，这种直接用原生事件属性的写法也不符合Angular的事件绑定规范，框架本身提供了更可靠的解决方案。

正确的解决办法 #

改用Angular的原生事件绑定语法(error)来监听图片加载失败事件，Angular会自动帮你把回调函数的上下文绑定到组件实例上：

修改后的test.component.html #

<img src="./assets/sample.jpeg" (error)="setValue()"> {{imageMenu}}

这样修改后，当图片加载失败触发error事件时，setValue()方法里的this就会正确指向TestComponent实例，修改this.imageMenu就能同步更新组件的属性，视图里的{{imageMenu}}也会随之实时变化。

额外补充（不推荐的另类写法） #

如果出于某些特殊原因一定要用原生onError，你可以在组件的ngOnInit里手动绑定上下文，不过这种写法比较繁琐，还是建议优先用Angular的事件绑定：

ngOnInit() {
  const imgEl = document.querySelector('img[src="./assets/sample.jpeg"]');
  if (imgEl) {
    // 手动把this绑定到组件实例
    imgEl.onerror = this.setValue.bind(this);
  }
}

内容的提问来源于stack exchange，提问作者Rama Krishna