Laden/Navigieren von Seiten dynamisch (Ionic 2 + Angular 2)

Question

Ich erstelle eine Rezept App, ich habe verschiedene Kategorien, die ich dynamisch auf Klick laden möchte. Um Rezepte zu ziehen, habe ich eine URL (http get Anfrage), die ich mit einer Zeichenfolge erweitern möchte abhängig von welcher Kategorie ich klicke.

Die URL Basis würde

http://api.yummly.com/v1/api/recipes?_app_id=/////&_app_key=/////

Am Ende sein, die ich entweder eine von diesen hinzufügen wollen würde.

396^Dairy-Free 393^Gluten-Free 391^Nut-Free 393^Wheat-Free und so weiter. Könnte mir jemand bitte auf eine Idee geben, wie diese zur Zeit

Mein HTML umzusetzen ist

<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> 

und HTTP-Anforderung ist

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

Derzeit ist nur 1 url Laden auf einer Seite, die ich habe, aber Ich möchte, dass sich dies ändert, je nachdem, welche Kategorie ausgewählt wurde. Vielen Dank

Answer 1

Gibt es irgendeinen Grund, warum Sie nur einen onClick-Handler und den Router zum Navigieren verwenden würden? Sie können alle gewünschten Informationen als sinnvolles Objekt oder Array anstelle aller URL-Hacking senden.

Zum Beispiel, hier ist eine einfache Kopfkomponente I als Basis verwenden, für die meisten meiner Projekte in diesen Tagen (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 } 

Beachten Sie, dass „Nachricht“ ist ein beliebiger Schlüsselnamen. Es kann alles sein.

In der raubend Ansicht (die man navigiert wird):

// 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' ]; 

Sehr einfach so, sehr gut lesbar (viel mehr als die IMHO etwas kryptisch: url_tokens etc.), insbesondere wenn man bedenkt, die Übertragung von Dateien. Wenn Sie ein komplexes Objekt/Array übertragen müssen, serialisieren Sie einfach den Wert von "message" (oder wie immer Sie es nennen) als JSON, dann JSON.parse am empfangenden Ende.