如何将数据从一个页面传递到另一个页面，以便在Ionic 2中进行导航 [英] How to pass data from one page to another for Navigation in Ionic 2
本文介绍了如何将数据从一个页面传递到另一个页面，以便在Ionic 2中进行导航的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Ionic的初学者2.我想在点击列表项后将Json数据从一个页面传递到另一个页面。列表中的项目来自json，并且具有与每个项目相关联的特定ID。所以我想在特定项目上点击事件后传递一个特定的id。
这是json链接：
1。
2。但现在我想显示该特定项目的详细信息。所以我使用这个链接
http://factoryunlock.in/products/1
我想在点击事件后更改该ID（在链接2 产品/ 1 中）特定项目。
这是我的Listview代码（Second.ts）。
从'@ angular / core'导入{Component};
从'ionic-angular'导入{IonicPage，NavController，NavParams};
从'../../providers/earthquakes/earthquakes'导入{EarthquakesProvider};
从'../details/details'导入{DetailsPage};
从'../charts/charts'导入{ChartsPage};
@IonicPage（）
@Component（{
selector：'page-second'，
templateUrl：'second.html'，
提供者：[EarthquakesProvider]
}）
导出类SecondPage {
public DateList：Array< Object> ;;
构造函数（public _navCtrl：NavController，
public _earthquakes：EarthquakesProvider）{
this.getEarthquakes（）;
}
public Listitem（l）{
this._navCtrl.push（DetailsPage
）;
}
public openModal（）{
this._navCtrl.push（ChartsPage）;
}
getEarthquakes（）{
this._earthquakes.loadEarthquakess（）。subscribe（res => {
this.DateList = res.data;
}）;
}
}
这是我的提供者控制器：
从'@ angular / core'导入{Injectable};来自'@ angular / http'的
import {Http};
import'rxjs / add / operator / map';
@Injectable（）
导出类EarthquakesProvider {
构造函数（public _http：Http）{
console.log（'Hello Earthquakes Provider'） ;
}
loadEarthquakess（）{
return this._http.get（'http://factoryunlock.in/sundar/public/api/v1/products '）
.map（res => res.json（））;
}
loadEarthquakesdetails（）{
return this._http.get（'http：//factoryunlock.in/sundar/public/api/v1/products/1'）
.map（res => res.json（））;
}
这是我的详细信息。代码
从'@ angular / core'导入{Component};
从'ionic-angular'导入{IonicPage，NavController，NavParams};
从'../../providers/earthquakes/earthquakes'导入{EarthquakesProvider};
@IonicPage（）
@Component（{
selector：'page-details'，
templateUrl：'details.html'，
提供者：[EarthquakesProvider]
}）
导出类DetailsPage {
public DateList：Array< Object> ;;
item：any;
构造函数（public _navCtrl：NavController，public _earthquakes：EarthquakesProvider）{
this.getEarthquakes（）;
}
getEarthquakes（）{
this._earthquakes.loadEarthquakesdetails（）。subscribe（res => {
this.DateList = res。数据;
console.log（res.data）;
}）;
}
}
这是我的详细信息视图快照
解决方案
列表视图页面
public Listitem（id）{
this._navCtrl.push （DetailsPage，{id：id}）;
}
提供商控制器：
loadEarthquakesdetails（id）{
return this._http.get（`http://factoryunlock.in/sundar/public/api/v1 / products / $ {id}`）
.map（res => res.json（））;
}
Details.ts code
从'@ angular / core'导入{Component};
从'ionic-angular'导入{IonicPage，NavController，NavParams};
从'../../providers/earthquakes/earthquakes'导入{EarthquakesProvider};
@IonicPage（）
@Component（{
selector：'page-details'，
templateUrl：'details.html'，
提供者：[EarthquakesProvider]
}）
导出类DetailsPage {
public DateList：Array< Object> ;;
item：any;
id：number;
构造函数（public _navCtrl：NavController，public _earthquakes：EarthquakesProvider，public navParams：NavParams）{
this.id = navParams.get（'id'）;
}
ionViewDidLoad（）{
this.getEarthquakes（this.id）;
}
getEarthquakes（id）{
this._earthquakes.loadEarthquakesdetails（id）.subscribe（res => {
this.DateList = res.data;
console.log（res.data）;
}）;
}
}
I am Beginner in Ionic 2. I want to pass Json data from one page to another after I click on a list items. The Items in the list comes from json and has particular id's associated with each item. So I want to pass a particular id after a click event on a particular item.
This is the json link:
1. http://factoryunlock.in//products with the help of this link I will shows product in list
2. But now I want to show details of that particular item. So I use this link
http://factoryunlock.in/products/1
I want to change that id (In Link 2 products/1) after the click event on a particular item.
This is my Listview code (Second.ts).
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { EarthquakesProvider } from '../../providers/earthquakes/earthquakes';
import { DetailsPage } from '../details/details';
import { ChartsPage } from '../charts/charts';
@IonicPage()
@Component({
selector: 'page-second',
templateUrl: 'second.html',
providers: [EarthquakesProvider]
})
export class SecondPage {
public DateList: Array<Object>;
constructor(public _navCtrl: NavController,
public _earthquakes: EarthquakesProvider) {
this.getEarthquakes();
}
public Listitem(l) {
this._navCtrl.push(DetailsPage
);
}
public openModal() {
this._navCtrl.push(ChartsPage);
}
getEarthquakes() {
this._earthquakes.loadEarthquakess().subscribe(res => {
this.DateList = res.data;
});
}
}
This is my Provider Controller:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class EarthquakesProvider {
constructor(public _http: Http) {
console.log('Hello Earthquakes Provider');
}
loadEarthquakess() {
return this._http.get('http://factoryunlock.in/sundar/public/api/v1/products')
.map(res => res.json());
}
loadEarthquakesdetails() {
return this._http.get('http://factoryunlock.in/sundar/public/api/v1/products/1')
.map(res => res.json());
}
This is my details.ts code
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { EarthquakesProvider } from '../../providers/earthquakes/earthquakes';
@IonicPage()
@Component({
selector: 'page-details',
templateUrl: 'details.html',
providers: [EarthquakesProvider]
})
export class DetailsPage {
public DateList: Array<Object>;
item: any;
constructor(public _navCtrl: NavController, public _earthquakes: EarthquakesProvider) {
this.getEarthquakes();
}
getEarthquakes() {
this._earthquakes.loadEarthquakesdetails().subscribe(res => {
this.DateList = res.data;
console.log(res.data);
});
}
}
This is my Details view snapshot
解决方案
List view Page
public Listitem(id) {
this._navCtrl.push(DetailsPage, {id: id});
}
Provider Controller:
loadEarthquakesdetails(id) {
return this._http.get(`http://factoryunlock.in/sundar/public/api/v1/products/${id}`)
.map(res => res.json());
}
Details.ts code
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { EarthquakesProvider } from '../../providers/earthquakes/earthquakes';
@IonicPage()
@Component({
selector: 'page-details',
templateUrl: 'details.html',
providers: [EarthquakesProvider]
})
export class DetailsPage {
public DateList: Array<Object>;
item: any;
id: number;
constructor(public _navCtrl: NavController, public _earthquakes: EarthquakesProvider, public navParams: NavParams) {
this.id = navParams.get('id');
}
ionViewDidLoad() {
this.getEarthquakes(this.id);
}
getEarthquakes(id) {
this._earthquakes.loadEarthquakesdetails(id).subscribe(res => {
this.DateList = res.data;
console.log(res.data);
});
}
}
这篇关于如何将数据从一个页面传递到另一个页面，以便在Ionic 2中进行导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
