javascript - 使用 Observables 将函数转换为在 Angular 2 应用程序中使用传入变量

Question

我正在使用 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 中。在这个函数的转换中我遗漏了什么吗？

Answer 1

答案是 url 需要使用反引号而不是引号，因为传递给 API 的 url 中使用了插值。

this._url = `https://api.someurl.com/v0/contacts/group/${q}?limit=15&apikey=somekey`;