在子组件调用的方法中使用父组件的变量答案

【问题标题】：Use parent component's variable, in its method that is invoked by a child component在子组件调用的方法中使用父组件的变量
【发布时间】：2022-01-13 12:03:33
【问题描述】：

我正在使用子组件：

<app-photo-editor [addPhotoUrlExtension]="'users/add-photo'" [onUploadSuccess]="onUploadPhotoSuccess"
                [deletePhoto]="onDeletePhoto"></app-photo-editor>

并将 onUploadPhotoSuccess 函数传递给它：

 onUploadPhotoSuccess(response: any) {
    if (response) {
      const photo = JSON.parse(response);
      this.member.photoUrl = photo.url;  // offending line
      ...

在子组件上，我接受函数，并调用父函数：

export class PhotoEditorComponent implements OnInit {
  @Input() onUploadSuccess: (response: any) => void;

...

this.uploader.onSuccessItem = (item, response, status, headers) => {
      if (response) {
        this.onUploadSuccess(response);
      }
    }

这在违规行（上面标记）上给出了一个错误，说：

core.js:6498 ERROR TypeError: Cannot set properties of undefined (setting 'photoUrl')
    at PhotoEditorComponent.onUploadPhotoSuccess [as onUploadSuccess] (member-edit.component.ts:67:27)
    at FileUploader.uploader.onSuccessItem (photo-editor.component.ts:60:14)
    at FileUploader._onSuccessItem (ng2-file-upload.js:1326:1)
    at XMLHttpRequest.xhr.onload [as __zone_symbol__ON_PROPERTYload] (ng2-file-upload.js:1073:29)
    at XMLHttpRequest.wrapFn (zone.js:763:1)
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.js:28679:1)
    at ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:1)

这意味着this.member 是未定义的，现在一方面它确实有意义，我需要将它传递给子组件，但另一方面，我认为这是按原样工作的......所以我不确定什么是正确的解决方案..

【问题讨论】：

标签： javascript angular angular12

【解决方案1】：

这是因为您将常规函数传递给另一个组件，因此 this 关键字不是指原始组件。

您应该对onUploadPhotoSuccess 使用箭头函数或将this 绑定到它。

onUploadPhotoSuccess = (response: any) => {

【讨论】：

非常感谢！