J'essaie actuellement de m'enseigner Angular2 et TypeScript après avoir travaillé avec bonheur avec AngularJS 1. * pendant les 4 dernières années! Je dois admettre que je déteste ça, mais je suis sûr que mon moment eureka est juste au coin de la rue ... de toute façon, j'ai écrit un service dans mon application factice qui récupérera les données http d'un faux backend que j'ai écrit et qui sert 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');
}
}
Maintenant dans un composant, je souhaite exécuter (ou enchaîner) les deux méthodes getUserInfo()
et getUserPhotos(myId)
. Dans AngularJS, c'était facile car dans mon contrôleur, je ferais quelque chose comme ça pour éviter la "Pyramid of doom" ...
// Good old AngularJS 1.*
UserData.getUserInfo().then(function(resp) {
return UserData.getUserPhotos(resp.UserId);
}).then(function (resp) {
// do more stuff...
});
Maintenant, j'ai essayé de faire quelque chose de similaire dans mon composant (en remplaçant .then
pour .subscribe
) mais ma console d'erreur devient folle!
@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;
});
}
}
Je fais évidemment quelque chose de mal ... comment pourrais-je mieux avec Observables et RxJS? Désolé si je pose des questions stupides ... mais merci pour l'aide d'avance! J'ai également remarqué le code répété dans mes fonctions lors de la déclaration de mes en-têtes http ...