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

Question

我正在使用一个子组件：

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

并将 onUploadPhotoSuccess function 传递给它：

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

在子组件上，我接受 function，并调用父组件的 function：

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是未定义的，现在一方面它确实有意义我需要将它传递给子组件，但另一方面，我认为这是按原样工作的......所以我不确定什么是正确的解决方案..

Answer 1

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

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

onUploadPhotoSuccess = (response: any) => {