Динамическая загрузка страниц с параметрами (Ionic 2 + Angular 2)

Question

Я создаю приложение для рецептов, у меня есть разные категории, которые я хочу динамически загружать по клику. Чтобы вытащить рецепты, у меня есть url (http get request), который я хочу расширить с помощью строки, в зависимости от того, на какую категорию я нажимаю. Я понимаю, что это можно сделать с параметрами, но я не понимаю, как это работает, поскольку я новичок в угловых и ионных.

Базовый 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); 
     }); 
    }); 

В настоящее время у меня есть только один URL-адрес загрузки на странице, но Я хочу, чтобы это изменилось в зависимости от выбранной категории. Большое спасибо

Answer 1

Вам необходимо передать идентификатор категории, когда пользователь выберет категорию, а затем вызовет функцию и передаст идентификатор категории этой функции. В этой функции вызовите метод http, и вы можете использовать идентификатор категории в URL-адресе.

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

В ts.file

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