es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo almacenar los datos pasados desde otra página en Ionic 5?

01 Aug, 2023 Programación

Este es mi código ts de la página donde voy a pasar los datos a otra página

import { Component, OnInit } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';

export class CompListPage implements OnInit {
opencomp(complaint) {
    let comptype = complaint.comp_type;
    let navigationExtras: NavigationExtras = {
      state: { data: complaint, comptype },
    };
    this.router.navigate(['comp-detail'], navigationExtras);
  }
}

<p><strong>Este es mi código ts donde estoy recibiendo los datos</strong></p>

<p>“`
import { Component, OnInit } from ‘@angular/core’;
import { Router, ActivatedRoute } from ‘@angular/router’;

export class CompDetailPage implements OnInit {
constructor(
private router: Router,
private activateroute: ActivatedRoute )
{
this.activateroute.queryParams.subscribe((params) => {
this.complaintdata = this.router.getCurrentNavigation().extras.state.data;
console.log(this.complaintdata);
});
}
}
“`

¿Alguien puede ayudarme a guardar los datos pasados en mi página actual?

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para guardar los datos pasados en tu página actual, puedes asignar los datos a una variable en la clase del componente.

    En el constructor de tu clase CompDetailPage, ya estás suscrito a los queryParams de la ruta activada, pero en lugar de usar el método getCurrentNavigation() del enrutador, puedes acceder a los datos pasados directamente desde la propiedad state del objeto NavigationExtras.

    Aquí tienes un ejemplo actualizado de la clase CompDetailPage con una propiedad complaintdata:

    import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

export class CompDetailPage implements OnInit {
  complaintdata: any;

  constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute
  ) {
    this.activatedRoute.queryParams.subscribe((params) => {
      this.complaintdata = this.activatedRoute.snapshot.state.data;
      console.log(this.complaintdata);
    });
  }
}

    Ahora puedes utilizar la propiedad complaintdata en la plantilla de tu componente o en cualquier otro método de tu clase. Por ejemplo, puedes mostrar el mensaje de la queja en tu plantilla:

    {{ complaintdata?.message }}

    Ten en cuenta el uso del operador de navegación segura (?.) para evitar errores en caso de que el objeto complaintdata sea null o undefined.

Comments are closed.