angular 2+ 刷新回调未按预期工作

Question

我有一个关于 angular 2+ 和打字稿的问题，我有 2 个组件和一项服务，我需要实现的是当我打开 Modal(component) 并执行一个操作时（在我的例子中我做 http.post) 所以当我在模式中单击添加按钮时，我需要运行其他组件中的另一个功能。为此，我创建了 "refresh callback" 函数。

所以在共享服务中我有这个

private refreshCallback = Function;

setRefreshCallback(callback) {
  refreshCallback = callback;
}

runRefreshCallback() {
  refreshCallback();
}

在我的组件中，当用户在模式中单击“添加”时我需要刷新我有这个

getSomeData() {
 this.service.getData().toPromise().then(data=>{
   // do some stuff
});
}

在 ng init 上，我只是设置了我需要的回调运行当模态动作按钮被点击时

ngOnInit() {
   this.service.setRefreshCallback(this.getSomeData);
}

模态内的下一步我只是运行 refreshCallback 每次当用户像这样单击添加按钮时

add() {
// do some stuff 
this.service.runRefreshCallback();
}

这里发生的事情是回调正常工作它实际上像我预期的那样进入其他组件中的 getSomeData 函数，但我得到错误 this.service.getData() is undefined bla bla bla...，所以我不理解为什么回调函数在其自己的组件中看不到 this.service，它在 ngInit 上工作，它加载所有数据并执行所需的操作，但在启动刷新回调时未定义？

Answer 1

getSomeData 函数中的上下文 this 当您像下面这样传递它时，它会丢失：

ngOnInit() {
   this.service.setRefreshCallback(this.getSomeData);
}

要解决此问题，请将您在箭头函数中传递此函数的位置包装起来：

ngOnInit() {
   this.service.setRefreshCallback(() => this.getSomeData());
}

见red flags for this in the TypeScript documentation。

angular 2+ 刷新回调未按预期工作

angular 2+ refresh callback not working as expected

typescript

angular2-services

angular