Angular2：同级组件之间的通信

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

创建一个主服务（实例化一次，并由search和search-result组件用尽）。

在此服务中，创建一个主题（Behavior Subject或Replay Subject）。

在搜索组件中使用此主题可以发出数据（在这种情况下为搜索词）。

现在，在搜索结果组件中订阅该主题，并成功调用您的“ getFilteredData”函数，该函数的参数为​​此处的搜索词，这是您从订阅主题获得的。

我希望这有帮助。