在頁面之間導航和傳遞數據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中存儲數據的文章。 SQL Ionic 2

JSON Parse

JSON Stringify

或者其中任何一個，2）你可以利用navController的 「推」 數據從一個網頁到另一個。一個缺點是如果你的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 

對於你的情況，我建議的方法1，因爲我不知道你有多大的JSON文件，使你的生活中，以便下次當你的JSON文件變化。