使用参数动态加载页面（Ionic 2 + Angular 2）答案

【问题标题】：Dynamically loading pages with parameters (Ionic 2 + Angular 2)使用参数动态加载页面（Ionic 2 + Angular 2）
【发布时间】：2017-02-17 20:27:52
【问题描述】：

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

基本网址是

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，但我希望根据选择的类别来改变它。非常感谢

【问题讨论】：

标签： http angular ionic-framework ionic2

【解决方案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
    ......
}

【讨论】：