如何調用組件來更新數據？

我有一個包含2個子組件（更新，配置文件）的主要組件。如何調用組件來更新數據？

在更新組件上，我有一個包含多個輸入字段的表單。當我提交表格時，個人資料部分信息應在成功請求後更新。

問題是，配置文件信息在成功請求後不會更新。

那麼，如何調用配置文件組件來刷新更新的數據呢？我試圖在成功請求後調用服務，但沒有運氣。

順便說一句，父服務看起來像：

@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

獲得簡介：

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

更新簡介：

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

來源

2016-07-04 burjulius

沒有什麼，除了更新值做。你的問題沒有說明你是如何做到的。您如何在組件中使用該服務以及哪些數據沒有更新？ –

你必須訂閱你的組件中的getProfile（）方法。這樣，你將能夠綁定配置文件數據形式... – micronyks

@GünterZöchbauer更新的問題。 – burjulius

您需要利用它們之間的共享服務來通知配置文件組件。

例如UpdateProfileService中帶有observable /主題。在這種情況下，配置文件組件可以訂閱它來通知。

這裏的服務：

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

和成型件之內：

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

來源

2016-07-04 09:55:05

如何調用組件來更新數據？

回答

相關問題