2016-11-17 4 views
0

У меня есть родительский компонент UserComponent, который имеет несколько дочерних маршрутов. Я хочу иметь возможность вызвать функцию в UserComponent с любого дочернего маршрута. Это связано с тем, что как UserComponent, так и дочерний компонент ProfileComponent используют функцию в UserService, чтобы получить данные, необходимые для отображения, но когда я редактирую данные в ProfileComponent, данные не обновляются в UserComponent (так как он извлекает все данные после создания экземпляра (ngOnInit()), я думаю, он не слушает изменения).Сделать родительский компонент вызовом функции угловой 2

КОД UserComponent:

error: string; 
user: IProfile | {}; 

constructor(private router: Router, private userService: UserService) {} 

ngOnInit() { 
    this.getUser(); 
} 

getUser() { 
    this.userService.getProfile().subscribe(
    response => this.user = response, 
    error => this.error = error 
); 
} 

КОД ProfileComponent:

user: IProfile | {}; 
error: string; 

constructor(private userService: UserService) {} 

ngOnInit() { 
    this.userService.getProfile().subscribe(
    response => { 
     this.user = response; 
    }, 
    error => this.error = error 
); 
} 

update() { 

    ... 

    this.userService.updateProfile(data).subscribe(
    response => console.log(response), 
    error => this.error = error 
); 
} 

КОД UserService:

private profileURL = 'http://localhost:4042/api/v1/profile'; 

    constructor(private http: Http) {} 

    getProfile(): Observable<Object> { 
    let headers = new Headers({ 'Authorization': 'Bearer ' + localStorage.getItem('access_token') }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.get(this.profileURL, options) 
        .map(this.handleResponse) 
        .catch(this.handleError); 
} 

private handleResponse(data: Response): IProfile | {} { 
    return data.json() || {}; 
} 

private handleError (error: Response | any): Observable<Object> { 

    ... 

    return Observable.throw(errMsg); 
} 

updateProfile(data): Observable<Object> { 
    let body = JSON.stringify(data); 
    let headers = new Headers({ 'Authorization': 'Bearer ' + localStorage.getItem('access_token'), 'Content-Type': 'application/json;charset=utf-8' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.patch(this.profileURL, body, options) 
      .map((response: Response) => response) 
      .catch(this.handleError); 
} 
+1

Я бы использовал наблюдаемый, чтобы уведомлять компоненты, когда данные профиля изменились и заставили их требовать. –

ответ

0

Благодаря Джону Baird я был в состоянии создать в UserService которая содержала updated = new BehaviorSubject<boolean>(false)если профиль был отредактирован или нет. Когда я отредактировал профиль из дочернего компонента, я установил следующее значение этого объекта в true: this.updated.next(true). С другой стороны я подписался на эту тему для изменений в UserComponent и по изменению значения объекта. Я запустил функцию getProfile(), которая обновила данные.

Смежные вопросы