Skip to main content
5 de 13
etiquetas editadas
sioesi
  • 11.5k
  • 7
  • 26
  • 57

Pasar datos de una pantalla a otra (ionic)

Estoy tratando de pasar dos parámetros (name, email) desde un login con facebook bueno el login si esta funcionando pero cuando se va a la siguiente pantalla donde muestro los datos no me sale nada, quizas los estoy pasando mal o a la hora de leerlos en la otra pagina los leo mal, la verdad nose, espero me puedan ayudar

Pero si cambia de pantalla.

introducir la descripción de la imagen aquí

Este es mi codigo de la pantalla principal.ts:

import { Component } from '@angular/core';
//Importamos los elementos que vamos a utlizar
import { RegistroCPage } from './../RegistroCorpotativo/registroC';
import { RegistroPPage } from './../registroParticular/registroP';
import { RegistroNPage } from './../registroNuevo/registroN';
import { NativeStorage } from '@ionic-native/native-storage';
import { Facebook } from '@ionic-native/facebook';
import { NavController } from 'ionic-angular';


@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  registroCPage = RegistroCPage;
  registroPPage = RegistroPPage;
  registroNPage = RegistroNPage;

  constructor(
    private facebook: Facebook,
    public navCtrl: NavController,
    public nativeStorage: NativeStorage
  ) {

  }

  loginFacebook() {
    this.facebook.login(['public_profile', 'email'])
      .then(rta => {
        console.log(rta.status);
        if (rta.status == 'connected') {
          this.getInfo();
        };
      })
      .catch(error => {
        console.error(error);
      });
  }

  getInfo() {
    let nav = this.navCtrl;
    let env = this;
    this.facebook.api('/me?fields=id,name,email,first_name,picture,last_name,gender', ['public_profile', 'email'])
      .then(function (user) {
        env.nativeStorage.setItem('user',
          {
            name: user.name,
            email: user.email
          })
          .then(function () {
            nav.push(RegistroNPage);
          }, function (error) {
            console.log(error);
          })
      })
      .catch(error => {
        console.error(error);
      });
  }
}

Este es el codigo de mi Postlogin.ts:

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { NativeStorage } from '@ionic-native/native-storage';
import { Facebook } from '@ionic-native/facebook';
import { HomePage } from './../home/home';

@Component({
    selector: 'page-registroN',
    templateUrl: 'registroN.html'
})
export class RegistroNPage {

    user: any;
    userReady: boolean = false;

    constructor(
        public navCtrl: NavController,
        public fb: Facebook,
        public nativeStorage: NativeStorage) {

    }

    ionViewCanEnter() {
        let env = this;
        this.nativeStorage.getItem('user')
            .then(function (data) {
                env.user = {
                    name: data.name,
                    email: data.email
                };
                env.userReady = true;
            }, function (error) {
                console.log(error);
            });
    }

    doFbLogout() {
        var nav = this.navCtrl;
        let env = this;
        this.fb.logout()
            .then(function (response) {
                //user logged out so we will remove him from the NativeStorage
                env.nativeStorage.remove('user');
                nav.push(HomePage);
            }, function (error) {
                console.log(error);
            });
    }

}

Finalmente mi html de mi PostLogin:

<ion-content padding class="body" align="center">
    <img src="../../assets/logito.png">
    <br>
    <br>
    <ion-list *ngIf='userReady'>
        <ion-item>
            <ion-label>
                <ion-icon name="person"></ion-icon>
            </ion-label>
            <ion-input clearInput type="text" placeholder="Nombres">{{user.name}}
            </ion-input>
        </ion-item>
        <ion-item>
            <ion-label>
                <ion-icon name="mail"></ion-icon>
            </ion-label>
            <ion-input clearInput type="text" placeholder="Email">{{user.email}}
            </ion-input>
        </ion-item>
        <ion-item>
            <ion-label>
                <ion-icon name="call"></ion-icon>
            </ion-label>
            <ion-input clearInput type="text" placeholder="Teléfono">
            </ion-input>
        </ion-item>
    </ion-list>
    <button ion-button item-end round full icon-start color="dark" class="botones">
        <ion-icon name='checkmark-circle-outline'></ion-icon>
        registar
      </button>
</ion-content>
Ivan More Flores
  • 1.6k
  • 4
  • 20
  • 45