Dynamisches Laden von Seiten mit Parametern (Ionic 2 + Angular 2)

Question

Ich erstelle eine Rezept-App, ich habe verschiedene Kategorien, die ich dynamisch auf Klick laden möchte. Um Rezepte zu ziehen, habe ich eine URL (http get Anfrage), die ich mit einer Zeichenfolge erweitern möchte abhängig von welcher Kategorie ich klicke. Ich verstehe, dass dies mit Parametern gemacht werden kann, aber ich verstehe nicht, wie das funktioniert, da ich neu in eckig und ionisch bin.

Die URL Basis würde

http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=/////

Am Ende sein, die ich entweder eine von diesen hinzufügen wollen würde.

396^Dairy-Free 393^Gluten-Free 391^Nut-Free 393^Wheat-Free und so weiter. Könnte mir jemand bitte auf eine Idee geben, wie diese zur Zeit

Mein HTML umzusetzen ist

<ion-item [navPush] = "listingPage" detail-push> 
     <img src="http://placehold.it/500x500"> 
     <h1>Glueten Free</h1> 
    </ion-item> 
    <ion-item> 
     <img src="http://placehold.it/500x500"> 
     <h1>Category 2</h1> 
    </ion-item> 
    <ion-item> 
     <img src="http://placehold.it/500x500"> 
     <h1>Category 3</h1> 
    </ion-item> 
    <ion-item> 
     <img src="http://placehold.it/500x500"> 
     <h1>Category 4</h1> 
    </ion-item> 

und HTTP-Anforderung ist

this.http.get('http://api.yummly.com/v1/api/recipes?_app_id=////&_app_key=//////') 
     .map(res => res.json()) 
     .subscribe(data => { 
     // we've got back the raw data, now generate the core schedule data 
     // and save the data for later reference 
     console.log(data); 
     this.listing = data.matches; 
     resolve(this.listing); 
     }); 
    }); 

Derzeit ist nur 1 url Laden auf einer Seite, die ich habe, aber Ich möchte, dass sich dies ändert, je nachdem, welche Kategorie ausgewählt wurde. Vielen Dank

Answer 1

Sie müssen die Kategorie-ID übergeben, wenn der Benutzer die Kategorie auswählen und dann die Funktion aufrufen und die Kategorie-ID an diese Funktion übergeben. Rufen Sie in dieser Funktion die http-Methode auf, und Sie können die Kategorie-ID in der URL verwenden.

<button click="getData(this.value)"></button> 

In ts.file

getData(cat_id : any){ 
    ...... 
    you can use cat_id here in URL and call http method 
    ...... 
}