动态加载/导航页面(离子2 角2)

Question

我正在创建一个食谱应用程序，我有不同的类别，我想在单击时动态加载。要提取食谱，我有一个URL（http get请求），我想根据我单击哪个类别来扩展一个字符串。

基本网址为

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

您不会使用onclick处理程序和路由器导航的任何原因？您可以将想要的任何信息作为明智的对象或数组发送，而不是所有URL黑客入侵。

例如，这是我最近用作我大多数项目的基础的简单标头组件（Angular2）：

import { Component } from '@angular/core';
// Make sure to import/inject Router
import { Router } from '@angular/router';
class HeaderComponent {
    // I use ES6, if you use TS just use the annotations.
    static get parameters ( ) {
        return [ Router ];
    }
    constructor ( router ) {
        this.router = router;
    }
    // Use in an ngFor to create a row of buttons
    get buttons ( ) {
        return [
            { label : 'Home', route : '/home' },
            { label : 'Notes', route : '/notes' },
            { label : 'About', route : '/about' }
        ]
    }
    // Used when you click the top right logo
    onImageClick ( ) {
        this.router.navigate ( [ '/home' ], { message : 12345 } );
    }
    // Used when a button is clicked
    onButtonClick ( data ) {
        this.router.navigate ( [ data.route ], { message : "whatever data you want" } );
    }
}
HeaderComponent.annotations = [
    new Component ( {
        selector : 'tcoz-header',
        templateUrl: './header.component.html',
        styleUrls: [ './header.component.css' ]
    } )
];
export { HeaderComponent }

请注意，"消息"是一个任意的密钥名称。可以是什么。

在消费视图中（被导航到）：

// Make sure to import/inject ActivatedRoute
import { ActivatedRoute } from '@angular/router';
...
// Get the incoming data via the "message" property in ngOnInit, etc.
let message = this.route.snapshot.params [ 'message' ];

这种方式非常简单，非常可读性（比某种隐秘的url_tokens等都更易于读取（恕我直言），尤其是在考虑数据传输时。如果您需要传输复杂的对象/数组，只需序列化"消息"的值（或任何您称之为JSON），然后在接收端上json.parse。