Question

我有一个角度2+和打字稿的问题，我有2个组件和一个服务，我需要实现的是当我打开Modal（组件）并做一个动作（在我的情况下，我做http.post）所以当我单击模态内的添加按钮时，我需要在其他组件中运行另一个功能。为实现这一点，我创建了“刷新回调”功能。

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

box-sizing:border-box

在我的组件里面，当用户点击模态中的添加时我需要刷新我有这个

.modal { 
  margin: auto 0;
}
.overlay{ 
  padding: 4rem 0;
  overflow-y:auto;
  box-sizing: border-box;
}

并且在ng init上我只设置了在单击模态操作按钮时需要运行的回调

private refreshCallback = Function;

setRefreshCallback(callback) {
  refreshCallback = callback;
}

runRefreshCallback() {
  refreshCallback();
}

在模态中的下一件事我只是在每次用户点击这样的添加按钮时运行refreshCallback

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

这里发生的是回调通常它实际上进入其他组件中的getSomeData函数，就像我预期的那样，但是我得到错误this.service.getData（）是未定义的bla bla bla ...，所以我不明白为什么回调函数没有在它自己的组件中看到this.service，它在ngInit上工作，它加载所有数据并执行所需的东西，但是在刷新回调开始时它是未定义的？

Answer 1

this函数中的上下文getSomeData在您传递时会丢失，如下所示：

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

要修复此包装，请在箭头函数中传递此函数的位置：

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

请参阅red flags for this in the TypeScript documentation。

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

1 个答案: