我有一个Angular2应用程序的以下结构 .
在app.html文件中
<search></search>
<search-results></search-results>
SearchComponent和SearchResultsComponent都是独立的组件 . 我也有如下服务
内部服务文件
....
getFilteredData(input:string): Observable <any>{
return this.http.get(`${this.URL}${input}&api_key=DEMO_KEY`)
.map(response => response.json())
.catch((error:any) => Observable.throw(error.json().error || 'server error'));
}
....
在SearchComponent内部，我有一个带有输入字段和按钮的模板，如下所示：
....
<input type="text" class="form-control" id="input"
[(ngModel)]="model.input" name="input" #ipnut="ngModel">
</div>
<button type="submit" class="btn btn-primary">Search</button>
....
问题：让服务执行并将结果传递给SearchResultsComponent的最佳方法是什么？我知道我应该订阅Observable getFilteredData，但是如何启动搜索本身（即单击按钮后将表单输入中的数据传递给服务）
1 回答
创建主服务（实例化一次并由搜索和搜索结果组件使用） .
在此服务内部创建主题（行为主题或重播主题） .
在搜索组件中使用此主题可以发出此案例搜索词中的数据 .
现在在搜索结果组件中订阅此主题，并在其成功中调用您的“getFilteredData”函数，其中包含您在订阅主题时获得的search-word参数 .
我希望这有帮助 .