Question

在一个组件中，我有一个调用服务的简单方法：

  sendRequest() {
    this.myService
      .doStuff()
      .then((res) => { ... }
  }

此doStuff()方法是http.post已转换toPromise()

  doStuff(): Promise<any> {
    return this.http.post(somewhere).toPromise();
  }

在这个组件中我有另一个子组件接收函数@Input（）（它是一个简单的按钮）

<my-child [callback]="sendRequest"></my-child>

当我点击此按钮时，我得到了一个

无法找到未定义的属性doStuff

如果我调用以下代替doStuff，我会得到预期的行为：

  async testMe() {
    console.log("wait 5 sec");
    await new Promise(res => setTimeout(res, 5000));
    console.log("finished");
  }

我基本上试图实现这个：

使用http.post而不是超时承诺。

Answer 1

您将该函数作为输入传递。然后它失去了背景。 this中的sendRequest不再引用父组件。可能的解决方法是将lambda传递给Input，如下所示：

const lambda = () => this.sendRequest()

在html中：

<my-child [callback]="lambda"></my-child>

顺便将回调作为Input传递给子组件并不是一个好主意。假设您传递的函数由子组件在某个事件上调用，只需从子组件中使用Output发出该事件，并使用Angular模板语法订阅它： / p>

<my-child (onEvent)="sendRequest()"></my-child>