Angular 角度4：为什么可以'；我不能在ngOnInit（）中调用公共函数吗？

因此，我的ngOnInit（）中有以下代码：

}

这将关注onchange事件&当我提交表单时。当我提交表单时，我想调用此ngOnInit（）之外的公共函数，它如下所示：

public uploadFormdata(): void {
  const form = $('#inputForm').val();
  const files = ($('#fileUpload') as any).files;
  const formData = new FormData();
  const file = files[0];

  formData.append('tenant', form[0]);
  formData.append('title', form[1]);
  formData.append('file', file, file.name);
  this.uploadService.uploadForm(formData)
    .subscribe(res => this.fileUploaded(res));
}  

---

为什么我的Ngoniit（）中的“this.uploadFormData（）”不起作用？它表示“类型“HtmleElement”上不存在属性“uploadFormData”。

使用箭头函数，以便

此

引用组件的类。如果没有，这将引用绑定事件的DOM元素，即

inputForm

字段

$('#inputForm').submit(e => {
  e.preventDefault();

  this.uploadFormData();
});

---

注意：您应该真正避免使用jQuery来操作DOM，因为angular不知道jQuery引起的更改。

因为，sumbit表单中的

上下文引用的是
$（“#inputForm”）
而不是组件的类。
在您的情况下，您必须将上下文
此
保存到变量中

ngOnInit() {
  const $this = this;
  $('#inputForm').submit(function(e) {
    e.preventDefault();

    $this.uploadFormData();
  });
  // ...
}

或者您应该使用箭头功能：

  ngOnInit() {
      $('#inputForm').submit((e) => {
        e.preventDefault();

        this.uploadFormData();
      });
      // ...
   }

视图元素仅在“OnInit”之后加载，您可以使用


ngAfterViewInit（）{
$（'#inputForm'）。提交（函数（e）{
e、 预防默认值（）；
这是uploadFormData（）；
});
}
Nvm我明白了！它现在可以工作了，为什么在这种情况下使用arrow函数可以工作？@Tempuslight因为arrow函数会将其绑定到当前上下文（即您案例中的组件类），而
函数
会将其绑定到您将事件绑定到的对象的上下文（.e.输入DOM元素），下面的答案原则上是正确的。但是，您应该更多地从角度来看待代码。您实现这一点的方式与您在Angular中应该如何实现这一点完全矛盾。如果你走这条路，你会遇到更多的问题。我同意@MikeOne，你应该避免使用jQuery进行dom操作
  ngOnInit() {
      $('#inputForm').submit((e) => {
        e.preventDefault();

        this.uploadFormData();
      });
      // ...
   }