動態加載/瀏覽頁面（Ionic 2 + Angular 2）

Question

我正在創建一個食譜應用程序，我有不同的類別，我想動態加載點擊。拉食譜我有一個網址（http獲取請求），我想擴展一個字符串取決於我點擊什麼類別。

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

目前我只有一個頁面上1個網址加載，但我希望根據選擇的類別進行更改。非常感謝

Answer 1

任何你不會使用onClick處理程序和路由器導航的原因？你可以發送你想要的任何信息作爲一個明智的對象或數組，而不是所有的網址黑客入侵。

例如，下面是一個簡單的標題組件我作爲基礎用我的大多數項目的這些天（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' ]; 

很容易以此方式，非常可讀的（更加如此IMHO比晦澀：url_tokens等），特別是考慮到傳輸時數據的。如果你需要傳輸一個複雜的對象/數組，只需將「message」（或其他任何你稱之爲）的值序列化爲JSON，然後JSON.parse在接收端。