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

Question

我正在使用子组件：

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

Answer 1

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

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

onUploadPhotoSuccess = (response: any) => {

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

Use parent component's variable, in its method that is invoked by a child component

javascript

angular

angular12