使父组件调用一个函数angular 2

我有父组件UserComponent其子路由很少。我希望能够从任何子路由中调用UserComponent中的函数。这是因为UserComponent和例如它的子组件ProfileComponent都使用UserService中的函数来获取它们需要显示的数据，但是当我编辑ProfileComponent中的数据时，数据不会在UserComponent中刷新（因为它在实例创建后获取所有数据（ngOnInit（）），我想它没有听更改）。使父组件调用一个函数angular 2

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

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

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

来源

2016-11-17 Dawid Zbiński

我会使用一个observable通知组件时，个人资料数据已经改变，并导致他们重新查询。 –

感谢约翰·贝尔德我能创造一个包含UserService的updated = new BehaviorSubject<boolean>(false)该如果配置文件被编辑或没有信息。当我从子组件编辑配置文件时，我将该主题的下一个值设置为true this.updated.next(true)。另一方面，我订购了UserComponent的主题以及主题的价值变化，我解雇了更新数据的getProfile()函数。

来源

2016-11-17 15:49:45

使父组件调用一个函数angular 2

回答

相关问题