如何在 Ionic 2 中将数据从一页传递到另一页以进行导航 [英] How to pass data from one page to another for Navigation in Ionic 2

问题描述

我是 Ionic 2 的初学者.单击列表项后，我想将 Json 数据从一个页面传递到另一个页面.列表中的项目来自 json，并且具有与每个项目关联的特定 id.所以我想在特定项目的点击事件后传递一个特定的 id.

这是json链接:

1.

2. 但现在我想显示该特定项目的详细信息.所以我用这个链接

http://factoryunlock.in/products/1

我想在特定项目的点击事件之后更改该 ID(在链接 2 products/1 中).

这是我的 Listview 代码 (Second.ts).

从'@angular/core'导入{组件}；导入 { IonicPage, NavController, NavParams } from 'ionic-angular';从../../providers/earthquakes/earthquakes"导入{ EarthquakesProvider }；从'../details/details'导入{DetailsPage}；从'../charts/charts'导入{ ChartsPage }；@IonicPage()@零件({选择器:'page-second'，templateUrl: 'second.html',提供者:[EarthquakesProvider]})导出类 SecondPage {公共日期列表:数组<对象>；构造函数(公共_navCtrl:导航控制器，公共_earthquakes:地震提供者){this.getEarthquakes();}公共列表项(l){this._navCtrl.push(DetailsPage);}公共 openModal() {this._navCtrl.push(ChartsPage);}获取地震(){this._earthquakes.loadEarthquakess().subscribe(res => {this.DateList = res.data;});}}

这是我的提供者控制器:

import { Injectable } from '@angular/core';从@angular/http"导入 { Http }；导入'rxjs/add/operator/map'；@Injectable()导出类 EarthquakesProvider {构造函数(公共_http:http){console.log('Hello Earthquakes Provider');}加载地震(){return this._http.get('http://factoryunlock.in/sundar/public/api/v1/products').map(res => res.json());}加载地震详细信息(){return this._http.get('http://factoryunlock.in/sundar/public/api/v1/products/1').map(res => res.json());}

这是我的 details.ts 代码

从'@angular/core'导入{组件}；导入 { IonicPage, NavController, NavParams } from 'ionic-angular';从../../providers/earthquakes/earthquakes"导入{ EarthquakesProvider }；@IonicPage()@零件({选择器:'页面详细信息'，templateUrl: 'details.html',提供者:[EarthquakesProvider]})导出类 DetailsPage {公共日期列表:数组<对象>；项目:任何；构造函数(公共_navCtrl:NavController，公共_earthquakes:EarthquakesProvider){this.getEarthquakes();}获取地震(){this._earthquakes.loadEarthquakesdetails().subscribe(res => {this.DateList = res.data;控制台.log(res.data);});}}

这是我的详细信息视图快照

解决方案

列表视图页面

 public Listitem(id) {this._navCtrl.push(DetailsPage, {id: id});}

提供者控制器:

 loadEarthquakesdetails(id) {返回这个._http.get(`http://factoryunlock.in/sundar/public/api/v1/products/${id}`).map(res => res.json());}

Details.ts 代码

从'@angular/core'导入{组件}；导入 { IonicPage, NavController, NavParams } from 'ionic-angular';从../../providers/earthquakes/earthquakes"导入{ EarthquakesProvider }；@IonicPage()@零件({选择器:'页面详细信息'，templateUrl: 'details.html',提供者:[EarthquakesProvider]})导出类 DetailsPage {公共日期列表:数组<对象>；项目:任何；身份证号码;构造函数(公共_navCtrl:NavController，公共_earthquakes:EarthquakesProvider，公共navParams:NavParams){this.id = navParams.get('id');}ionViewDidLoad() {this.getEarthquakes(this.id);}获取地震(ID){this._earthquakes.loadEarthquakesdetails(id).subscribe(res => {this.DateList = res.data;控制台.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屋！