Question

我目前有一个配方应用程序，我有12个不同的类别，我目前有12个不同的HTML页面，因为它们都有不同的api调用，但结构相同。 API调用的一个例子是

loadCategory1() {
  var url = "http://api.yummly.com/v1/api/recipes?_app_id=///&_app_key=///";

  if (this.Category1) {
    // already loaded data
    return Promise.resolve(this.Category1);
  }

  // don't have the data yet
  return new Promise(resolve => {
    // We're using Angular HTTP provider to request the data,
    // then on the response, it'll map the JSON data to a parsed JS object.
    // Next, we process the data and resolve the promise with the new data.
    this.http.get(url + "&allowedAllergy[]=396^Dairy-Free&allowedAllergy[]=393^Gluten-Free&maxResult=50&start=10")
      .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.Category1 = data.matches;
        resolve(this.Category1);
      });
  });
}

loadCategory2() {
  var url = "http://api.yummly.com/v1/api/recipes?_app_id=///&_app_key=///";

  if (this.Category2) {
    return Promise.resolve(this.Category2);
  }

  return new Promise(resolve => {
    this.http.get(url + "&maxTotalTimeInSeconds=1800&maxResult=50&start=10")
      .map(res => res.json())
      .subscribe(data => {
        console.log(data);
        this.Category2 = data.matches;
        resolve(this.Category2);
      });
  });
}

loadCategory3() {
  var url = "http://api.yummly.com/v1/api/recipes?_app_id=///&_app_key=///";

  if (this.Category3) {
    return Promise.resolve(this.Category3);
  }

  return new Promise(resolve => {
    this.http.get(url + "&allowedCourse[]=course^course-Desserts&maxResult=50&start=10")
      .map(res => res.json())
      .subscribe(data => {
        console.log(data);
        this.Category3 = data.matches;
        resolve(this.Category3);
      });
  });
}

html是

<ion-content class="home">
  <ion-list>
    <ion-item [navPush] = "category1Page">
      <img src="assets/images/cat1.jpg">
      <h1>Gluten Free</h1>
    </ion-item>
    <ion-item [navPush] = "category2Page">
      <img src="assets/images/cat2.jpg">
      <h1>Under 30 Minutes</h1>
    </ion-item>
    <ion-item [navPush] = "category3Page">
      <img src="assets/images/cat3.jpg">
      <h1>Yummmy Deserts</h1>
    </ion-item>
   </ion-list>
 </ion-content>

然后在每个.ts文件中，为他们在相应函数中调用的类别。有没有办法可以将所有这些组合在一起，并且只有一个文件会在点击时动态变化？

因此，如果您单击框1它将执行xyz但是如果您单击框2它将只执行xy？

Ionic 2 Duplicate Categories页面将被压缩为一个

0 个答案: