Ich lerne Ionic-2-App zu bauen, habe ich ein paar Komponenten, die Dienste, die einen http-Aufruf und holen einige Daten, die wiederum in der Komponente eingestellt werden und werden schließlich verbrauchen in der Vorlage angezeigt werden. Ich habe den Fluss insgesamt verstanden, aber beim Codieren mache ich einen logischen Fehler.Ionic2/angular2 korrekte Art der konsumierenden Service
Mein Beispiel Komponente:
export class FarmList {
items: Object;
constructor(private testService: TestService, public nav: NavController){}
getData(): any {
this.items = this.testService.fetchData()
}
nextView(){
this.nav.push(Farm)
}
showDetails(id: Number){
this.nav.push(Farm, {
param1: id
})
}
}
Mein entsprechenden Service:
@Injectable()
export class TestService{
loading: boolean;
data: Object;
constructor(private http: Http){
let myUrl = 'http://jsonplaceholder.typicode.com/users';
this.loading = true;
this.http.request(myUrl)
.subscribe(
(res: Response) => {
this.loading=false;
this.data=res.json();
});
}
public fetchData(){
return this.data;
}
}
So ist das Problem hier ist:
Wenn ich klicken Fetch-Taste (die Anrufe getData() Funktion in der Komponente) wird es die Daten nicht geladen werden, irgendwie in dem Konstruktor der Komponente der Daten festgelegt werden muss und nicht wenn ich
getData()
Funktion aufrufen. Ich habe versucht,this.items = this.testService.fetchData()
diese Zeile im Konstruktor schreiben, aber es funktioniert nicht.Dieses Problem wird weiter verschlechtert, wenn sie in einer anderen Komponente und Service Ich habe
navparam
von diesem FarmList Komponente beifügt:let myUrl = 'http://jsonplaceholder.typicode.com/users/' + this.id ;
Ich versuche this.id anhängen, die zu empfangen navparam darin Konstruktor gesetzt ist und ich erhalten undefinedKonstruktor (privat nextService: nextService, navParams: NavParams) { this.id = navParams.get ("param1"); }
Ich versuche einfach nur auf einer Seite eine Liste zu haben und dann auf einen der Listeneinträge klicken, werden neue Seite öffnen damit einige weitere Details ist. Ich treffe diese öffentlich verfügbare API: http://jsonplaceholder.typicode.com/users/ und dann eine Nummer an sie anhängen, um nur ein Objekt zu erhalten.
Was ist der richtige Weg?
UPDATE: ich das zweite Problem, indem sie einfach immer navParams in Service Konstruktor lösen könnte und es an die URL angehängt wird, wie folgt:
@Injectable()
export class NextService{
loading: boolean;
data: Object;
id: Number;
constructor(private http: Http, navParams: NavParams){
this.id = navParams.get("param1");
console.log("Second service fetching param: " + this.id)
let myUrl = 'http://jsonplaceholder.typicode.com/users/' + this.id ;
...
}
Haben Sie versucht, mit Hilfe von [ngOninit] (https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html)? –
Nein, ich wusste nichts davon. Irgendwelche Anweisungen, wie man es benutzt? – Nitish