パラメータを含むページを動的に読み込む（Ionic 2 + Angular 2）

Question

私はレシピアプリを作成していますが、私はクリック時に動的にロードするカテゴリが異なります。レシピをプルするには、クリックしたカテゴリに応じて文字列を拡張したいURL（http取得リクエスト）があります。これはパラメータで行うことができると私は理解していますが、角度とイオンに慣れていないので、これがどのように機能するのか分かりません。

ベースURLは、私はどちらか、これらのいずれかを追加したいと思う最後に

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

だろう。

396^Dairy-Free 393^Gluten-Free 391^Nut-Free 393^Wheat-Freeのように。誰かが私にこの

私のHTMLは、現在

<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> 

で、HTTPリクエストが

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

ある現在、私は唯一のページ1つのURLの負荷を持って実装する方法のアイデアを与えるが、してもらえ選択したカテゴリに応じてこれを変更します。多くの感謝

Answer 1

ユーザーがカテゴリを選択し、関数を呼び出して、その関数にカテゴリIDを渡すときにカテゴリIDを渡す必要があります。その関数では、httpメソッドを呼び出すと、URLのカテゴリIDを使用できます。 ts.file

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

で

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