動的にページを読み込み/ナビゲートする（Ionic 2 + Angular 2）

Question

私はレシピアプリを作成していますが、私はクリック時に動的にロードするカテゴリが異なります。レシピをプルするには、クリックしたカテゴリに応じて文字列を拡張したいURL（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つのURLの負荷を持って実装する方法のアイデアを与えるが、してもらえ選択したカテゴリに応じてこれを変更します。多くのありがとう

Answer 1

あなたは単にonClickハンドラとルーターを使ってナビゲートしていないのでしょうか？すべてのURLハッキングの代わりに、あなたが知覚可能なオブジェクトまたは配列として必要な情報を送信できます。 「メッセージ」は、任意のキー名であること

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 } 

注：

例えば、ここで私は、これらの日（Angular2）私のプロジェクトのほとんどのためのベースとして使用し、単純なヘッダ構成要素です。それは何でもかまいません。かかるビュー（1がナビゲートされている）で

：

// 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します。