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

您可以使用简单的javascript/typescript来解决这个问题，只需使用回调方法。

您的服务功能将如下所示：

serviceFunction(callback?) {
  const cb = callback || (() => { });
  // do your services thing
  return cb();
} 

因此，当您调用它时，只需使用您想要使用的回调函数调用serviceFunction。

考虑到您的组件中有一个this.close（）方法，调用将如下所示：

myService.serviceFunction(this.close);

Answer 2

您的回调函数希望将一个modalComponent作为参数，但您的html在（单击）=“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的注释，假设此是对该模式的相关引用），或者您将方法更改为已经知道该模式。

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

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

myObj.callback();

匿名函数对于厚颜无耻地利用调用方作用域中不存在的资源非常有用。

Answer 3

就像按钮一样，您可以将方法/回调传递给服务，然后从服务内部调用它们，例如。

openConfirmModal() {
  this.service.openmodal({
    buttons: [ {name: 'Close'} ],
    methods: {
      onClose: () => {/** your function body goes here */},
      onSubmit: () => {/** your function body goes here*/}
      .
      .
      .
    }
  });
}

然后在你的服务中，你可以随时给他们打电话。

选中此复选框并单击