http - 使用参数动态加载页面(Ionic 2 + Angular 2)

Question

我正在创建一个食谱应用程序，我想在点击时动态加载不同的类别。为了提取食谱，我有一个 url(http get 请求)，我想根据我点击的类别用一个字符串来扩展它。我知道这可以通过参数来完成，但我不明白这是如何工作的，因为我是 Angular 和 Ionic 的新手。

基本 url 将是

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

最后我想添加其中任何一个。

396^不含乳制品 393^无麸质 391^无坚果 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。

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

在 ts.file 中

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