Angular:将函数传递给对象内部的服务

Question

我有一个组件，我在其中传递我想在模态中显示的内容，如下所示:

  openConfirmModal() {
    this.service.openmodal(
      {
        buttons: [ {name: 'Close'} ]
      }
    );
  }

模态服务是这样的:

  openmodal(input: String) {
    const dialogRef = this.dialog.open(popupComponent, {
      data: new ModalConfirmData({
        buttons: Object.values(data)[0]
      })
    });
  }

在我的 popupComponent 里面我有:

export class ModalPopupData {
  actions: Array<Object>;

  constructor(input?) {
    if (input) {
      this.buttons = input.buttons;
    }
  }
}

现在一切正常，但我现在想做的是将一个函数传递给我的服务，以便它使用它。像这样，但我不知道怎么做:

{
  function: (modalComponent) => {
    modalComponent.close();
  }
}

Answer 1

您的回调期望将 modalComponent 作为参数，但您的 html 仅在 (click)="act.callback" 处没有做任何事情.

在您当前的代码中，您构建的方法基本上如下所示:

var myCallback = function(modalComponent) {
  modalComponent.close();
}
// ...
var someObj = {
  name: "Close",
  callback: myCallback
}

如此调用它，最终需要做的事情:

// ...
var modalComp = getComponent(); // however it gets hold of a modalComponent
someObj.callback(modalComp);

需要为该方法提供一个 modalComponent 才能处理，但是在调用它时，您并没有在当前代码中给它一个。

因此，要么您当前调用的回调需要提供您要关闭的模态作为输入(类似于@ConnorsFan 的评论，假设 this 是对模态的相关引用) ，或者您将方法更改为已经了解模态。

var myModal = ...;
var myObj = {
  name: "Close",
  callback: () => { myModal.close(); }
}

现在用法看起来像这样，因为没有输入参数:

myObj.callback();

匿名函数对于厚颜无耻地使用实际上并不存在于调用者范围内的资源非常有用。