我正在使用 observables 在我的 Angular 2 应用程序中提取数据。现在,我有几个服务/组件在做几乎相同的事情,所以我想通过重构来使这个“DRYer”,这样我就可以传入一个与我在组件中进行的 API 调用不同的参数。这样我就可以为每个需要该服务的组件使用一项服务。
让我首先展示什么是有效的(为了比较):
在我的服务中,我有这个:
getByCategory() {
this._url = "https://api.someurl.com/v0/contacts/group/staff?limit=15&apikey=somekey";
return this._http.get(this._url)
.map((response: Response) => response.json())
.catch(this._errorsHandler);
}
_errorsHandler(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
在我的组件中,我是这样订阅的:
this.contactService.getByCategory()
.subscribe(resRecordsData => this.records = resRecordsData,
responseRecordsError => this.errorMsg = responseRecordsError);
同样,上述所有代码都有效。
但是,由于各个组件的调用之间唯一不同的是 API 调用中的一个参数(组),因此我想重构以使其类似于以下内容:
getByCategory(group) {
const q = encodeURIComponent(group);
this._url = "https://api.someurl.com/v0/contacts/group/${q}?limit=15&apikey=somekey";
return this._http.get(this._url)
.map((response: Response) => response.json())
.catch(this._errorsHandler);
}
_errorsHandler(error: Response) {
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
然后在组件中我会订阅这个,同时还传递每个组件不同的一组参数,如下所示:
this.contactService.getByStage('staff')
.subscribe(resRecordsData => this.records = resRecordsData,
responseRecordsError => this.errorMsg = responseRecordsError);
当我尝试这样做时,我没有收到任何错误,但也没有将任何数据打印到 View 中。在这个函数的转换中我遗漏了什么吗?
最佳答案
答案是 url 需要使用反引号而不是引号,因为传递给 API 的 url 中使用了插值。
this._url = `https://api.someurl.com/v0/contacts/group/${q}?limit=15&apikey=somekey`;
关于javascript - 使用 Observables 将函数转换为在 Angular 2 应用程序中使用传入变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42354682/