Angular2：兄弟组件之间的通信答案

【问题标题】：Angular2: Communication between sibling componentsAngular2：兄弟组件之间的通信
【发布时间】：2017-05-04 23:08:35
【问题描述】：

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

【问题讨论】：

多一点上下文会有所帮助。我无法弄清楚实际问题是什么。

标签： javascript angular angular2-template angular2-forms angular2-services

【解决方案1】：

创建一个主服务（它被实例化一次并被搜索和搜索结果组件用完）。

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

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

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

我希望这会有所帮助。

【讨论】：