Atualmente, estou tentando aprender Angular2 e TypeScript depois de trabalhar com prazer com AngularJS 1. * nos últimos 4 anos! Tenho que admitir que estou odiando isso, mas tenho certeza de que meu momento eureka está chegando ... de qualquer maneira, escrevi um serviço em meu aplicativo fictício que buscará dados http de um back-end falso que escrevi que serve JSON.
import {Injectable} from 'angular2/core';
import {Http, Headers, Response} from 'angular2/http';
import {Observable} from 'rxjs';
@Injectable()
export class UserData {
constructor(public http: Http) {
}
getUserStatus(): any {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.get('/restservice/userstatus', {headers: headers})
.map((data: any) => data.json())
.catch(this.handleError);
}
getUserInfo(): any {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.get('/restservice/profile/info', {headers: headers})
.map((data: any) => data.json())
.catch(this.handleError);
}
getUserPhotos(myId): any {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.get(`restservice/profile/pictures/overview/${ myId }`, {headers: headers})
.map((data: any) => data.json())
.catch(this.handleError);
}
private handleError(error: Response) {
// just logging to the console for now...
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
Agora, em um componente, desejo executar (ou encadear) os métodos getUserInfo()
e getUserPhotos(myId)
. No AngularJS isso foi fácil, pois no meu controlador eu faria algo assim para evitar a "Pirâmide da desgraça" ...
// Good old AngularJS 1.*
UserData.getUserInfo().then(function(resp) {
return UserData.getUserPhotos(resp.UserId);
}).then(function (resp) {
// do more stuff...
});
Agora eu tentei fazer algo semelhante no meu componente (substituindo .then
a .subscribe
) no entanto o meu console de erro enlouquecendo!
@Component({
selector: 'profile',
template: require('app/components/profile/profile.html'),
providers: [],
directives: [],
pipes: []
})
export class Profile implements OnInit {
userPhotos: any;
userInfo: any;
// UserData is my service
constructor(private userData: UserData) {
}
ngOnInit() {
// I need to pass my own ID here...
this.userData.getUserPhotos('123456') // ToDo: Get this from parent or UserData Service
.subscribe(
(data) => {
this.userPhotos = data;
}
).getUserInfo().subscribe(
(data) => {
this.userInfo = data;
});
}
}
Obviamente, estou fazendo algo errado ... como seria a melhor com Observables e RxJS? Desculpe se estou fazendo perguntas estúpidas ... mas obrigado pela ajuda desde já! Também notei o código repetido em minhas funções ao declarar meus cabeçalhos http ...