Angular 4技术疑问：为何无法在ngOnInit()中调用公共函数？

嘿，这个问题我之前在项目里也踩过坑！核心问题出在jQuery事件回调里的this上下文和Angular组件的this不是同一个对象。

为什么会这样？ #

在jQuery的submit、on这类事件回调函数中，默认情况下this指向的是触发事件的DOM元素（比如这里的#inputForm表单元素），而不是你的Angular组件实例。所以当你在回调里调用this.uploadFormData()时，实际上是在试图调用DOM元素的uploadFormData方法——这显然不存在，自然就调用失败了。

几种解决办法 #

1. 使用箭头函数（最推荐）

箭头函数不会创建自己的this，它会继承外层上下文的this（也就是Angular组件实例）。把你的submit回调改成箭头函数就行：

ngOnInit() {
  $('#inputForm').submit((e) => { // 这里改成箭头函数
    e.preventDefault();
    this.uploadFormData(); // 现在this就是组件实例了，能正常调用方法
  });
  // ... 其他代码不变
}

2. 提前保存组件的this到变量

你可以在回调外面先把组件的this存到一个变量（比如self、that），然后在回调里用这个变量调用方法：

ngOnInit() {
  const self = this; // 保存组件的this引用
  $('#inputForm').submit(function(e) {
    e.preventDefault();
    self.uploadFormData(); // 用self代替this调用方法
  });
  // ... 其他代码不变
}

3. 使用bind()绑定上下文

通过bind()方法把组件的this绑定到回调函数上，强制改变回调里的this指向：

ngOnInit() {
  $('#inputForm').submit(function(e) {
    e.preventDefault();
    this.uploadFormData();
  }.bind(this)); // 把组件的this绑定到这个回调
  // ... 其他代码不变
}

额外建议：尽量用Angular原生方式替代jQuery #

其实在Angular项目里，不推荐直接用jQuery操作DOM和绑定事件——Angular本身提供了更贴合框架的事件绑定和DOM操作方式，不仅能避免这类上下文问题，还能更好地和Angular的变更检测机制配合。比如：

模板代码（替代jQuery的事件绑定）

<form (ngSubmit)="handleSubmit($event)" #inputForm>
  <input type="file" (change)="handleFileChange($event)" #fileUpload>
  <div [class.error]="isError" id="message">{{ messageText }}</div>
  <button type="submit">提交</button>
</form>

组件类代码

isError = false;
messageText = '';

handleSubmit(event: Event) {
  event.preventDefault();
  this.uploadFormData(); // 直接调用，this就是组件实例
}

handleFileChange(event: Event) {
  const fileInput = event.target as HTMLInputElement;
  if (fileInput.files?.length) {
    const fileType = fileInput.files[0].type;
    if (fileType !== 'text/xml') {
      this.messageText = 'File to upload must be an XML file!!!';
      this.isError = true;
    } else {
      this.messageText = 'File to upload ...';
      this.isError = false;
    }
  }
}

这种方式完全脱离jQuery，更符合Angular的开发最佳实践哦～

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