web-dev-qa-db-fra.com

Comment passer des données d'une page à une autre pour la navigation dans Ionic 2

Je suis débutant dans Ionic 2. Je souhaite transmettre les données Json d’une page à une autre après avoir cliqué sur une liste d’éléments. Les éléments de la liste proviennent de JSON et ont des identifiants particuliers associés à chaque élément. Je souhaite donc transmettre un identifiant particulier après un événement de clic sur un élément particulier.

Ceci est le lien JSON:

1. http://factoryunlock.in//products avec l'aide de ce lien, je vais montrer le produit dans la liste

 enter image description here

2. Mais maintenant, je veux montrer les détails de cet élément particulier. Donc j'utilise ce lien

http://factoryunlock.in/products/1

Je souhaite modifier cet identifiant (In Link 2 products/1) après l'événement click sur un élément particulier.

Ceci est mon code Listview (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;

        });
    }

 }

Ceci est mon contrôleur de fournisseur:

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());
    }

Ceci est mon code details.ts

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);
        });
    }

 }

Ceci est mon aperçu de la vue Détails

 enter image description here

angularionic-frameworkionic2hybrid-mobile-appmulti-device-hybrid-apps
7
Harshal Deshmukh

Voir la liste Page 

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

Contrôleur de fournisseur: 

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

Code détails.ts 

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);
        });
    }

 }
6
Swapnil Patwa

Vous pouvez l'utiliser dans votre 

Contrôleur de fournisseur

loadEarthquakesdetails(id) {
    return this._http.get(`http://factoryunlock.in/sundar/public/api/v1/products/'+'id')
        .map(res => res.json());
}

Ce travail pour moi. 

0
rahul patel