Teilen und aktualisieren Observable Daten in Angular 2

Question

Ich habe 2 Komponenten - object-list und search-filter in meiner App. Auch ich habe eine fetch-service mit getObjects(page, filter) Methode. Ich möchte ein Szenario implementieren, wo object-list ruft alle Daten über getObjects Methode und dann search-filter wird einige Filter auf getObjects anwenden und object-list sollte automatisch aktualisieren. Hier ist ein 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 
} 

Suchfilter

constructor(private fetch: FetchService) {} 

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

Ich benutze subscribe nicht zu objects, weil ich es in asynchrone Leitung in *ngFor setze. Aber soweit es mich betrifft async Rohr verwendet subscribe innen. Das Problem ist, dass die Liste nur einmal aktualisiert wird, wenn ngOnInit ausgelöst wird. Was läuft falsch?

Answer 1

Die Komponente SearchFilter sollte NICHT für das Abrufen der Daten zuständig sein.

Hier ist, wie ich es tun würde:

1) Erstellen Sie 3 Komponenten

• A Stammkomponente, auch bekannt als "Smart-Komponente", die gesamte Logik des Zuhörens zu behandeln Änderungen filtern und Abrufen der Daten mit FetchService. Die übergeordnete Komponente hat in der Vorlage zwei untergeordnete Elemente:
• Erstes Kind:SearchFilterComponent ist eine "dumme Komponente" (oder Präsentationskomponente). Seine einzige Aufgabe besteht darin, bei jeder Änderung der Filter ein @Output-Ereignis auszulösen, wobei die neuesten Filterwerte an die übergeordneten Filter übergeben werden.
• Zweites Kind:ObjectListComponent ist auch eine "dumme Komponente". Die einzige Aufgabe besteht darin, die Liste der von der übergeordneten Komponente bereitgestellten Objekte über eine @Input-Eigenschaft anzuzeigen.

2) Umsetzung der folgenden Arbeitsablauf

• Wenn Filter in SearchFilterComponent ändern, emittieren eine @Output Ereignis die neuesten Filterwerte vorbei, z.B. this.filtersChanged.emit(filters).
• In der übergeordneten Komponente, hören Sie Filteränderungen mit <search-filter (filtersChanged)="getObjects($event)">. Die Methode getObjects(filters) ruft die Objekte bei jedem Filterwechsel erneut ab. Es sollte die abgerufenen Objekte in einer Eigenschaft der übergeordneten Komponente speichern, nennen wir es results.
• Anschließend übergibt die übergeordnete Komponente results an ihre untergeordnete Komponente ObjectListComponent über eine @ Input-Eigenschaft namens objects: <object-list [objects]="results">.Die Objektliste sollte sich bei jeder Änderung der Eingabe automatisch aktualisieren.

Hoffentlich werden meine Erklärungen Sinn ergeben. Lesen Sie @Input und @Output auf der Website angular.io, wenn Sie mit diesen nicht vertraut sind. Ich habe keine Zeit, einen Plunkr zu erstellen, also bitte posten Sie Fragen, wenn etwas unklar erscheint.