Question

我使用angular w / rxjs来观察界面上的用户事件。但是，我在将参数传递给箭头函数中的方法时遇到了这个非常简单的问题。这是问题所在：

这不起作用：未将searchterm传递给this.searchFacilities

ngOnInit() {
 this.searchTerm$.subscribe(searchterm => this.searchFacilities);/**Not working here**/
}

searchFacilities(term: string){
  console.log(term);
  this.facilityservice.searchFacilities(term)
    .subscribe(results => this.facilityList = results);
}

但这有效：

this.searchTerm$.subscribe(searchterm => { this.searchFacilities(searchterm); })

显然，我有其他非常轻松的解决方案，但我真的很想知道为什么我的第一种方法不起作用。谢谢！

Answer 1

因为参数没有直接传递给你的函数。

来自the doc的示例：

Rx.Observable.range(0, 3).subscribe(function (x) { console.log(x) });

带箭头功能的相同示例：

Rx.Observable.range(0, 3).subscribe(x => console.log(x));

Answer 2

小澄清。 doc说您需要将回调传递给subscribe()，并且此回调将接收observable发出的值。

我们可以这样写：

const myCallBack = (val) => console.log(val);
Observable.range(0, 3).subscribe(myCallBack);

在您的情况下，您已经有回调this.searchFacilities 这意味着你可以简单地写：

this.searchTerm$.subscribe(this.searchFacilities);

就像您可以将我的原始示例重写为：

// Now `console.log` is the callback!
Observable.range(0, 3).subscribe(console.log);

换句话说，问题不是“为什么箭头函数不传递参数”。问题是你创建了一个箭头函数，其主体是你的回调，而不是直接使用你的回调。

您的代码的扩展版本如下所示：

const myCallBack = (searchterm) => {
  return this.searchFacilities;
}

如您所见，searchFacilities既未被调用也未接收searchterm参数。

通过编写以下代码，您可能会遇到与NON-ARROW函数相同的问题（虽然箭头函数的语法确实使错误更容易和阴险）：

const myCallBack = function(searchterm) {
  return this.searchFacilities;
}

Answer 3

因为您获得了对searchTerm的引用，但您没有对其进行任何操作。您可以this.searchTerm$.subscribe(this.searchFacilities)，该术语将被传递到函数中。

Answer 4

您 searchFacilities 函数在全局范围内声明，然后在ngOnInit内部作为回调调用，其上下文不再是全局范围，现在 this 指向ngOnInit元素对象。为了在ngOnInit对象中工作，你需要绑定它，然后 searchFacilities 是ngOnInit的方法，并以这种方式开始工作。

为什么箭头函数没有传递参数？

4 个答案: