Wie Komponente zum Aktualisieren von Daten aufgerufen wird?

Question

Ich habe eine Hauptkomponente mit 2 Unterkomponenten (Update, Profil).

Auf Update-Komponente habe ich ein Formular mit mehreren Eingabefeldern. Wenn ich ein Formular abschicke, sollten die Profilinformationen nach einer erfolgreichen Anfrage aktualisiert werden.

Das Problem ist, Profilinformationen werden nach einer erfolgreichen Anfrage nicht aktualisiert.

So, wie Profilkomponente aufgerufen wird, um aktualisierte Daten zu aktualisieren? Ich habe versucht, nach erfolgreicher Anfrage einen Dienst anzurufen, aber kein Glück.

By the way, Eltern-Service wie folgt aussieht:

@Injectable() 
export class AvailabilityService { 

    constructor(private http: Http) { 
    } 

    getProfile() { 
    return this.http.get(API_URL + '/user/profile') 
     .map(this.extractData) 
     .catch(this.handleError); 
    } 

    freeOwnersParking(availableDates: AvailableDates) { 
    let domain = API_URL + '/parking/availability'; 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 
    let body = JSON.stringify(availableDates); 
    return this.http.put(domain, body, options) 
     .catch(this.handleError); 
    } 

    private extractData(res: Response) { 
    let body = res.json(); 
    return body; 
    } 

    private handleError(error: any) { 
    let errMsg = (error.message) ? error.message : 
     error.status ? `${error.status} - ${error.statusText}` : 'Server error'; 
    return Observable.throw(errMsg); 
    } 

} 

UPDATE

Get Profil:

getProfile() { 
    this.availabilityService.getProfile() 
     .subscribe(
     profile =>this.profile = profile, 
     error => this.errorMessage = <any>error 
    ); 
    } 

Profil aktualisieren:

freeOwnersParking() { 
    this.availabilityService.freeOwnersParking(this.availableDates) 
     .subscribe(
     response => this.availabilityService.getProfile(), 
     error => this.errorMessage = error 
    ); 
    } 

Answer 1

Sie müssen einen gemeinsamen Dienst verwenden, um die Profilkomponente zu benachrichtigen.

Zum Beispiel ein UpdateProfileService mit einem beobachtbaren/Betreff darin. In diesem Fall kann die Profilkomponente darauf abonnieren, um benachrichtigt zu werden. Hier

ist der Service:

@Injectable() 
export class UpdateProfileService { 
    profileUpdated:Subject<boolean> = new Subject(); 

    (...) 

    updateProfile(profile:any) { 
    return this.http.put('http://...', profile) 
      .map(res => { 
       this.profileUpdated.next(true); 
       return res.json(); 
      }); 
    } 
} 

und innerhalb der Profilkomponente:

@Component({ 
    (...) 
}) 
export class ProfileComponent { 
    constructor(private service:UpdateProfileService) { 
    this.service.profileUpdated.subscribe(() => { 
     // Update bound data for profile 
    }); 
    } 
}