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个网址，但我希望根据所选的类别进行更改。非常感谢

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 }

请注意，“message”是任意键名。它可以是任何东西。

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

// 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等），特别是在考虑数据传输时。如果你需要传输一个复杂的对象/数组，只需将“message”（或任何你称之为）的值序列化为JSON，然后在接收端JSON.parse它。

动态加载/导航页面（Ionic 2 + Angular 2）

1 个答案: