javascript - 在Angular 2中共享和更新可观察数据

我的应用程序中有2个组件-object-list和search-filter。我也有一个fetch-service和getObjects(page, filter)方法。我想实现一个方案，其中object-list通过getObjects方法获取所有数据，然后search-filter将某些过滤器应用于getObjects，并且object-list应该自动更新。这是一些代码：

FetchService

objects: Observable<any>;

getObjects(page: number, filter): void {
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');

  const offset = (page - 1)* this.pageSize;
  let url = this.objectsBaseUrl;

  //apply filter
  if (filter) {
    url = `${url}?filter=${JSON.stringify(filter)}`
  }

  this.objects = this.http.get(url)
    .map((response: Response) => {
      return response.json() || {}
    })
    .catch(this.handleError);
}

ObjectListComponent

constructor(private fetch: FetchService) {}
ngOnInit(): void {
  this.fetch.getObjects(this.initialPage);
  this.objects = this.fetch.objects; // I need an Observable object to use with async pipe with *ngFor
}

getPage(page: number) {
    this.fetch.getObjects(page); //here this.objects variable probably should be update because this methods replaces this.fetch.objects
}

SearchFilter

constructor(private fetch: FetchService) {}

apply() {
  //some filter calculations
  this.fetch.getObjects(1, this.filter);
}

我不使用subscribe到objects，因为我将其放在*ngFor中的异步管道中。但就我而言，异步管道在内部使用subscribe。问题在于，当ngOnInit触发时，列表仅更新一次。怎么了

最佳答案

SearchFilter组件不应负责获取数据。

这是我的处理方式：

1）创建3个组件


一个父组件（也称为“智能组件”），用于处理侦听过滤器更改和使用FetchService提取数据的所有逻辑。父组件的模板中显示了两个子组件：
第一个孩子：SearchFilterComponent是一个“哑组件”（或表示组件）。它唯一的工作是每次过滤器更改时都发出一个@Output事件，将最新的过滤器值传递给其父级。
第二个孩子：ObjectListComponent也是一个“哑组件”。它的唯一工作是通过@Input属性显示其父组件提供的对象列表。


2）实施以下工作流程


当过滤器在SearchFilterComponent中更改时，发出一个@Output事件，传递最新的过滤器值，例如this.filtersChanged.emit(filters)。
在父组件中，使用<search-filter (filtersChanged)="getObjects($event)">监听过滤器更改。 getObjects(filters)方法将在每次过滤器更改时重新获取对象；它应该将获取的对象存储在父组件的属性中，我们称之为results。
然后，父组件通过名为results：ObjectListComponent的@Input属性将objects传递给其子组件<object-list [objects]="results">。每次输入更改时，对象列表应自动刷新。


希望我的解释会有意义。如果您不熟悉@@ Input和@Output，请在angular.io网站上阅读。我没有时间创建Plunkr，所以如果有什么不清楚的地方，请发表问题。