Paso de una página a otra

Abrir una segunda página desde HTML

Ejemplo donde se añade un botón en la página de inicio para que abra una segunda página.

La segunda página se ha creado con el nombre "segunda":

ionic g page segunda

home.html

Se usa NavPush en el botón, haciendo referencia a la variable segundaPage que se debe declarar en home.ts como propiedad de la clase HomePage.

  <!-- Botón para abrir la segunda página -->
  <button ion-button [navPush]="segundaPage">
    Abrir segunda Página
  </button>

home.ts

Para abrir la segunda página se debe asignar a la variable segundaPage (que se ha utilizado en el bótón) el nombre de la clase correspondiente a la página que se desea abrir ("SegundaPage").

export class HomePage {
  segundaPage = "SegundaPage";
  constructor(public navCtrl: NavController) {
  }
}

segunda.ts

El nombre que se asigne a la variable en home.ts debe ser el mismo que el nombre de la clase de la segunda página:

export class SegundaPage {

segunda.html

<ion-content padding>
  <!-- texto de relleno para la segunda página -->
  Esta es la segunda página
</ion-content>

En la segunda página se añade automáticamente una flecha de vuelta atrás en la barra superior.

Abrir una segunda página desde TS

Una alternativa para el ejemplo anterior es realizar desde el botón una llamada a un método que se encuentre definidio en el controlador (.ts) de la página.

home.html

    <!-- Botón para abrir la segunda página -->
    <button ion-button (click)="abrirSegundaPag()">
      Abrir segunda Página
    </button>

Según este código se realiza una llamada al método abrirSegundaPag() cuando el usuario haga clic en el botón.

home.ts

El método invocado debe realizar una llamada al método push del objeto NavController (navCtrl) que se encuentra declarado en el constructor, pasándole por parámetro una variabe que almacene el nombre de la clase de la página a abrir.

export class HomePage {
  constructor(public navCtrl: NavController) {
  }

  abrirSegundaPag() {
    this.navCtrl.push("SegundaPage");
  }
}

En la segunda página no es necesario hacer ninguna acción. Tan sólo debe cumplir, al igual que antes, que la clase se denomine como se ha indicado en la variable segundaPage.

Paso de parámetros

Paso de parámetros a la segunda página desde HTML

Una situación muy común es que se deseen pasar datos de una página a la otra. Esto se puede conseguir en Ionic con NavParams.

Los datos que se deseen enviar deberán estar formados como un objeto con parejas de clave/valores. En el siguiente ejemplo se van a pasar de la primera página a la segunda 2 valores, un texto ("Hola") y un número (6238). Al texto se le va a asignar el identificador unTexto y al número unNumero. Por tanto el objeto a pasar como parámetro se puede formar así, asignándole también un identificador, por ejemplo, paramsParaSegPag:

  paramsParaSegPag = {
    unTexto: "Hola",
    unNumero: 6238
  };

home.html

En el botón de la primera página se debe hacer referencia a navParams asignándole el nombre de la variable que contiene los datos que se desean pasar a la segudna página:

    <!-- Botón para abrir la segunda página -->
    <button ion-button [navPush]="segundaPage" [navParams]="paramsParaSegPag">
      Abrir segunda Página
    </button>

home.ts

El controlador de la primera página deberá contener algo como esto:

export class HomePage {
  segundaPage = "SegundaPage";
  paramsParaSegPag = {
    unTexto: "Hola",
    unNumero: 6238
  };

  constructor(public navCtrl: NavController) {
  }
}

segunda.ts

El controlador de la segunda página debe usar el parámetro navParams que recibe el método constructor, y usar su método get para recibir cada dato que le ha sido enviado por la primera página. Como parámetro del método get se debe indicar un string con el identificador del dato que se desee recoger.

export class SegundaPage {
  unTextoRecibido: string; 
  unNumeroRecibido: number; 

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.unTextoRecibido = navParams.get("unTexto");
    this.unNumeroRecibido = navParams.get("unNumero");
  }
}

segunda.html

En la plantilla html de la segunda página debes hacer referencia a las variables miembro de la clase controladora que contienen ahora los datos recibidos. Por ejemplo:

    <h5>Parámetros recibidos:</h5>
    <p>Texto recibido: {{unTextoRecibido}}</p>
    <p>Número recibido: {{unNumeroRecibido}}</p>

Paso de parámetros a la segunda página desde TS

Otra forma alternativa de usar NavParams es utilizándolo directamente desde la clase controladora sin tener que indicarlo en la plantilla html, y haciendo uso de push desde la clase controladora.

home.html

    <!-- Botón para abrir la segunda página -->
    <button ion-button (click)="abrirSegundaPag()">
      Abrir segunda Página
    </button>

html.ts

export class HomePage {
  paramsParaSegPag = {
    unTexto: "Hola",
    unNumero: 6238
  };

  constructor(public navCtrl: NavController) {
  }

  abrirSegundaPag() {
    this.navCtrl.push("SegundaPage", this.paramsParaSegPag);
  }
}

El código de la segunda página puede quedar de la misma manera que en la alternativa anterior.

Recibir parámetro como objeto

También es posible recibir los datos en la segunda página como un único objeto que englobe toda la información. Para ello se debe usar la propiedad data de navParams. El valor obtenido es un objeto con toda la información que se ha pasado como parámetro. La forma de enviar los datos desde la primera página es igual que en los ejemplos anteriores, por lo que vemos a continación cómo puedes usarlo en la segunda página:

segunda.ts

export class SegundaPage {
  objetoRecibido: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.objetoRecibido = navParams.data;
  }
}

segunda.html

En la plantilla html puedes mostrar el dato que desees del objeto indicando el identificador del objeto y de la propiedad a mostrar:

    <h5>Parámetros recibidos:</h5>
    <p>Texto recibido: {{objetoRecibido.unTexto}}</p>
    <p>Número recibido: {{objetoRecibido.unNumero}}</p>

Abrir segunda página a partir de una lista

Usando navPush desde HTML

home.ts

export class HomePage {
  segundaPage = "SegundaPage";
  datos = [
    {unTextoCorto: "Uno",  unTextoLargo: "El primer valor"},
    {unTextoCorto: "Dos",  unTextoLargo: "El segundo valor"},
    {unTextoCorto: "Tres", unTextoLargo: "El tercer valor"},
  ];

  constructor(public navCtrl: NavController) {
  }
}

home.html

    <ion-list>
      <ion-item *ngFor="let dato of datos" [navPush]="segundaPage" [navParams]="dato">
        <h2>{{ dato.unTextoCorto }}</h2>
        <p>{{ dato.unTextoLargo }}</p>
      </ion-item>
    </ion-list>

segunda.ts

export class SegundaPage {
  objetoRecibido: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.objetoRecibido = navParams.data;
  }
}

segunda.html

    <p>Texto recibido: {{objetoRecibido.unTextoCorto}}</p>
    <p>Número recibido: {{objetoRecibido.unTextoLargo}}</p>

Usando push desde TS

home.html

<ion-item *ngFor="let dato of datos" (click)="abrirSegundaPag(dato)">

home.ts

  abrirSegundaPag(datoSeleccionado) {
    this.navCtrl.push("SegundaPage", datoSeleccionado);
  }