ページ間のデータの移動と引き渡しIonic 2

Question

Ionic2でページ間を移動する際に問題が発生します。

私はdata.jsonここ

から得たこと、データのリストを持っているが、私は詳細を取得したいリスト

です：

例 - "A"から

私のデータにあるデータ/ Example.Json

{ 
    "title": "A", 
    "lat": 2.323733, 
    "lon": 64,546465 
}, 

タイトルをクリックすると、新しいページにタイトル、緯度、経度が表示されます。

app.modules.ts私は、すぐに私が何かをクリックして詳細を取得したい

import { NgModule, ErrorHandler } from '@angular/core'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { HomePage } from '../pages/home/home'; 
import { MapPage } from '../pages/map/map'; 
import { ListPage } from '../pages/list/list'; 
import { DetailPage } from '../pages/detail/detail'; 
import { Locations } from '../providers/locations'; 
import { GoogleMaps } from '../providers/google-maps'; 
import { Connectivity } from '../providers/connectivity'; 
declare var google: any; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    HomePage, 
    MapPage, 
    ListPage, 
    DetailPage 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    HomePage, 
    MapPage, 
    ListPage, 
    DetailPage 
    ], 
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},Locations,GoogleMaps, Connectivity] 
}) 
export class AppModule {} 

    import { NgModule, ErrorHandler } from '@angular/core'; 
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { HomePage } from '../pages/home/home'; 
import { MapPage } from '../pages/map/map'; 
import { ListPage } from '../pages/list/list'; 
import { DetailPage } from '../pages/detail/detail'; 
import { Locations } from '../providers/locations'; 
import { GoogleMaps } from '../providers/google-maps'; 
import { Connectivity } from '../providers/connectivity'; 
declare var google: any; 

@NgModule({ 
    declarations: [ 
    MyApp, 
    HomePage, 
    MapPage, 
    ListPage, 
    DetailPage 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    HomePage, 
    MapPage, 
    ListPage, 
    DetailPage 
    ], 
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler},Locations,GoogleMaps, Connectivity] 
}) 
export class AppModule {} 

PageA.ts（データのリスト）

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import { Locations } from '../../providers/locations'; 
import { DetailPage } from '../detail/detail'; 


@Component({ 
    selector: 'page-list', 
    templateUrl: 'list.html' 
}) 
export class ListPage { 


    constructor(public navCtrl: NavController, public locations: Locations) { 

    } 

    ionViewDidLoad() { 
    console.log('Test Si marche'); 


    } 

    viewLocation(event,location) { 
    this.navCtrl.push(DetailPage, { 
     "title":location.title, 
     "longitude":location.longitude 
    }) 
    } 

} 

ページB（リスト）

import { Component } from '@angular/core'; 
import { NavController } from 'ionic-angular'; 
import {NavParams} from "ionic-angular"; 
import { Locations} from '../../providers/locations'; 
import { ListPage } from '../list/list'; 





@Component({ 
    selector: 'page-detail', 
    templateUrl: 'detail.html', 
    providers: [ Locations ], 
    entryComponents:[ ListPage ] 
}) 


export class DetailPage { 

    title: string 
    latitude: string 
    navParams: NavParams 

    constructor(navParams: NavParams,public navCtrl: NavController) { 
     this.navParams = navParams 
     this.title = this.navParams.get('title'); 
     this.latitude = this.navParams.get('latitude'); 
    } 

    ionViewDidLoad(err) { 
     console.log(err); 


    } 
    goBack() { 
     this.navCtrl.pop(); 
    } 

} 

listA.html

<ion-header> 

    <ion-navbar color="secondary"> 
     <ion-title>List</ion-title> 
    </ion-navbar> 

</ion-header> 


<ion-content> 

    <ion-list no-lines> 

     <ion-item *ngFor="let location of locations.data"> 

      <ion-item (click)="viewLocation($event, locations)">{{locations.title}}</ion-item> 
      <ion-avatar item-left> 
       <ion-icon name="pin"></ion-icon> 
      </ion-avatar> 
      <!--<img src="./src/pics/mus.png"/>--> 
      <h2>{{location.title}}</h2> 
      <p>{{location.distance*1.609}} Km</p> 
     </ion-item> 

    </ion-list> 

</ion-content> 

data.json

[ 
    { "title": "Cat", "longitude": "14,57" }, 
    { "title": "Bird", "longitude": "17.45" }, 
    { "title": "Spider", "longitude": "19,12" } 
] 

Answer 1

あなたがあるページから別のページにデータを渡したい場合、あなたはどちらか

1）JSON.stringify（ストア経由でSQL形式でのJSONデータを保存することができます）と、 JSON.parse（取得）メソッド

SQLテーブルに格納する前にデータを文字列化し、次のページから取得した後は、JSON.parseを実行してJSONオブジェクトを取得します。

データをSQLに格納する方法については、次の記事を参照してください。 2）あなたがあるページから別のページに "プッシュ" データにからNavControllerを利用することができ、 SQL Ionic 2

JSON Parse

JSON Stringify

どちらか。 1つの欠点は、JSONデータが巨大である場合には、ゆっくりと反復処理する必要があることです。

簡単な例は次のようになります。

this.navController.push(ThePageNameYouWannaGo, { 
     firstPassed: "firstData", 
     secondPassed: "secondData", 
     thirdPassed: "thirdData", 
}); 


//On the next page (at your constructor), 

Constructor(....,NavParams,.....){ 

    this.first = navParams.get("firstPassed"); 
    this.second= navParams.get("secondPassed"); 
    this.third= navParams.get("thirdPassed"); 

//the value would be stored inside this.first, this.second respectively 

あなたのケースのために私は何の手掛かりあなたのJSONファイルがどのように大きいを持っていないとして、私は方法1をお勧めしますとするとき、あなたのJSONファイル、将来的にあなたの人生を容易にするために変更。