Angular：将函数传递给对象内部的服务答案

【问题标题】：Angular: pass functions to service inside an objectAngular：将函数传递给对象内部的服务
【发布时间】：2019-09-10 17:44:31
【问题描述】：

我有一个组件，我在其中传递我想在这样的模式中显示的内容：

  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();
  }
}

【问题讨论】：

您可以尝试从回调定义中删除async 并使用：(click)="act.callback(this)" 处理点击事件。
它不工作：/
您能否将问题发布到 stackblitz 中以便我们更好地解决它？因为您可以毫无问题地将function 作为callback parameter 传递。

标签： angular

【解决方案1】：

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

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

然后在您的服务中，您可以随时致电他们。

也检查一下 click

【讨论】：

【解决方案2】：

您的回调期望接收 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();

匿名函数对于厚颜无耻地利用调用者范围内并不真正存在的资源很有用。

【讨论】：

但是当我这样做时，我收到一个错误错误错误：未捕获（承诺）：TypeError：modalComponent.close不是函数
您的模态组件是否公开了公共close() 方法？您如何获得对 modalComponent 的引用？

【解决方案3】：

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

您的service function 会是这样的：

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

所以当你调用它时，你只需用你想使用的callback function 调用serviceFunction。

考虑到您的 component 中有一个 this.close() 方法，调用看起来像：

myService.serviceFunction(this.close);

【讨论】：