Ionic 4: cómo pasar datos entre páginas usando navCtrl o el servicio de enrutador

Te sugerimos que revises esta respuesta en un entorno controlado antes de pasarlo a producción, saludos.

Solución:

Hay varias formas de pasar parámetros de una página a otra en Ionic v4 / Angular 7.2+:

1. Uso de Extras State (nuevo desde Angular 7.2) – Recomendado

Simple y limpio

// original page
let navigationExtras: NavigationExtras =  state:  foo: this.foo  ;
this.router.navigate(['destination-path'], navigationExtras);
// destination page
constructor(private route: ActivatedRoute, private router: Router) 
    this.route.queryParams.subscribe(params => 
      if (this.router.getCurrentNavigation().extras.state) 
        this.foo= this.router.getCurrentNavigation().extras.state.foo;
      
    );
  

2. Usa un servicio y un resolver

No fecta los datos pero un poco pesado.

Almacene los datos en un servicio y pase un resolver usando el enrutador

3. Usando la identificación del objeto (no recomendado)

Si su objeto está almacenado, puede pasar la identificación en la URL y recuperarla nuevamente.

Ralentizará la aplicación, implica que el objeto está almacenado en algún lugar y puede aumentar los problemas de red (si no se almacena localmente)

4. Uso de parámetros de consulta (no recomendado)

Al enhebrar su objeto: vea la respuesta de @Tahseen Quraishi

Solo se pueden pasar algunas informaciones y la URL es horrible

Algunos ejemplos aquí

Resolví esto envolviendo el Ionic NavController en un proveedor que tiene funciones para establecer un valor a una variable y una función para obtenerlo nuevamente. Similar a this.navParams.get('myItem').

Echa un vistazo a lo siguiente;

import  Injectable  from '@angular/core';
import  NavController  from '@ionic/angular';

@Injectable()
export class Nav 
    data: any;

    constructor(public navCtrl: NavController) 
        // ...
    

    push(url: string, data: any = '') 
        this.data = data;

        this.navCtrl.navigateForward('/' + url);
    

    pop(url) 
        this.navCtrl.navigateBack('/' + url);
    

    get(key: string) 
        return this.data[key];
    

¡Espero que esto ayude!

Simplemente puede pasar el objeto con ruta utilizando queryParams.

import  Router  from '@angular/router';

      object = 
            name: 'subham',
            age: '34',
            address: '34 street, Delhi, India'
            

      constructor(public router : Router) 

            onGoToNextPage()
            this.router.navigate(['/pageName'],
            queryParams: this.object,
            );
          

para recibir esto objeto necesitas usar ActivatedRoute que se va a importar de ‘@angular/enrutador’

import  ActivatedRoute  from '@angular/router';


 constructor(public activatedRoute : ActivatedRoute,)  

                this.activatedRoute.queryParams.subscribe((res)=>
                  console.log(res);
              );
              

Por si tienes poco estructura compleja del objeto.

supongamos que tiene el siguiente objeto para enviar.

object = 
                name: 'subham',
                age: '34',
                address: '34 street, Delhi, India'
                favourite_movie: ['dhoom','race 2','krishh'],
                detail : 
                  height: '6ft',
                  weight: '70kg'
                 
                

Para enviar lo anterior objeto necesitas primero encadenar el objeto con la ayuda de JSON.stringfy().

   import  Router  from '@angular/router';

          object = 
                    name: 'subham',
                    age: '34',
                    address: '34 street, Delhi, India'
                    favourite_movie: ['dhoom','race 2','krishh'],
                    detail : 
                      height: '6ft',
                      weight: '70kg',
                     
                    

          constructor(public router : Router) 

                onGoToNextPage()
                this.router.navigate(['/pageName'],
                queryParams: 
                   value : JSON.stringify(this.object)
                  ,
                );
              

para recibir esto objeto necesitas analizar gramaticalmente este objeto usando JSON.parse() método.

import  ActivatedRoute  from '@angular/router';


 constructor(public activatedRoute : ActivatedRoute,)  

                this.activatedRoute.queryParams.subscribe((res)=>
                  console.log(JSON.parse(res.value));
              );
              

Si entiendes que te ha resultado provechoso este artículo, te agradeceríamos que lo compartas con el resto programadores de esta forma nos ayudas a dar difusión a nuestro contenido.

---

---

Utiliza Nuestro Buscador