Загрузка/Навигация по страницам Динамически (Ionic 2 + Angular 2)

Question

Я создаю приложение для рецептов, у меня есть разные категории, которые я хочу динамически загружать по клику. Чтобы вытащить рецепты, у меня есть url (http get request), который я хочу расширить с помощью строки, в зависимости от того, на какую категорию я нажимаю.

Базовый URL будет

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); 
     }); 
    }); 

В настоящее время у меня есть только один 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 и т.д.), особенно при рассмотрении вопроса о передаче данных. Если вам нужно передать сложный объект/массив, просто сериализуйте значение «message» (или как бы вы его называете) как JSON, а затем JSON.parse его на принимающей стороне.