Question

我的应用中有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触发时只更新一次。出了什么问题？

Answer 1

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

这是我将如何做到的：

1）创建3个组件

父组件，又名＆＃34;智能组件＆＃34;，用于处理监听过滤器更改和使用FetchService获取数据的所有逻辑。父组件在其模板中显示两个子项：
第一个孩子： SearchFilterComponent是一个＆＃34;哑的组件＆＃34; （或表示部分）。它唯一的工作是每次过滤器更改时发出@Output事件，将最新的过滤器值传递给其父级。
第二个孩子： ObjectListComponent也是一个愚蠢的组件＆＃34;。它唯一的工作是通过@Input属性显示其父组件提供的对象列表。

2）实施以下工作流程

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

希望我的解释有意义。如果您对这些内容不熟悉，请在angular.io网站上阅读@Input和@Output。我没有时间创建一个Plunkr，所以如果有任何不清楚的地方请发帖。

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

1 个答案: