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

Question

I have 2 components - object-list and search-filter in my app. Also I have a fetch-service with getObjects(page, filter) method. I want to implement a scenario where object-list fetches all data via getObjects method and then search-filter will apply some filters to getObjects and object-list should automatically update. Here is some code:

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);
}

I don't use subscribe to objects because I put it to async pipe in *ngFor . But as far as I'm concerned async pipe uses subscribe inside. The problem is that the list updates only once when ngOnInit fires. What's going wrong?

Answer 1

The SearchFilter component should NOT be in charge of fetching the data.

Here's how I would do it:

1) Create 3 components

• A parent component , aka "smart component", to handle all the logic of listening to filter changes and fetching the data with FetchService . The parent component has two children displayed in its template:
• First child: SearchFilterComponent is a "dumb component" (or presentational component). Its only job is to emit an @Output event every time the filters change, passing the latest filter values to its parent.
• Second child: ObjectListComponent is also a "dumb component". Its only job is to display the list of objects provided by its parent component via an @Input property.

2) Implement the following workflow

• When filters change in SearchFilterComponent , emit an @Output event passing the latest filter values, eg this.filtersChanged.emit(filters) .
• In the parent component, listen to filter changes with <search-filter (filtersChanged)="getObjects($event)"> . The getObjects(filters) method will re-fetch the objects on every filter change; it should store the fetched objects in a property of the parent component, let's call it results .
• Then, the parent component passes results to its child component ObjectListComponent via an @Input property called objects : <object-list [objects]="results"> . The object list should refresh automatically every time the input changes.

Hopefully my explanations will make sense. Read up on @Input and @Output on the angular.io site if you're not familiar with those. I don't have time to create a Plunkr, so please post questions if anythings seems unclear.