Question

我有一个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，但是如何启动搜索本身（即单击按钮后将表单输入中的数据传递给服务）

Answer 1

创建主服务（实例化一次并由搜索和搜索结果组件使用）。

在此服务内创建主题（行为主题或重播主题）。

在搜索组件中使用此主题以发出此案例搜索词中的数据。

现在在搜索结果组件中订阅此主题，并在其成功中调用您的＆＃34; getFilteredData＆＃34;这里使用参数函数搜索你从订阅主题获得的搜索词。

我希望这会有所帮助。

Angular2：兄弟组件之间的通信

1 个答案: