Skip to main content
6 de 13
se añadieron 4 caracteres en el cuerpo
Ivan More Flores
  • 1.6k
  • 4
  • 20
  • 45

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.

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>

introducir la descripción de la imagen aquí

Ivan More Flores
  • 1.6k
  • 4
  • 20
  • 45