在页面之间导航和传递数据 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>

数据.json

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

Answer 1

如果你想将数据从一个页面传递到另一个页面，你可以

1) 通过 JSON.stringify(store) 和 JSON.parse(retrieving) 方法以 SQL 格式存储您的 JSON 数据。

这意味着您将数据字符串化，在存储在 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 文件更改时让您的生活更轻松。