Navegación

El sistema de navegación que define Ionic no sigue la forma típica de navegación en entornos Web, en la que tenemos una URL para cada página y creamos enlaces a dichas URLs para cambiar de página. Con Ionic y Angular se construye una única página (SPA, Single Page Application) que va cargando distintos componentes para navegar de una página a otra.

En Angular para esto se usa el módulo Router, sin embargo en Ionic no se utiliza, sino que se ha creado otro sistema de navegación. Cuando se carga la aplicación se crea una pila para ir guardando las páginas por las que se va navegando. Inicialmente se añade la página de inicio y según vayamos abriendo paǵinas se irán apilando, visualizando únicamente la última página (la que está en el tope de la pila). De esta forma, al pulsar para atrás se irá desapilando las pantallas hasta llegar a la página de inicio.

Este sistema de navegación lo gestiona el componente "<ion-nav>", el cual se añade desde la plantilla del componente principal "app.html", de la forma:

<ion-nav [root]="rootPage"></ion-nav>

Como podemos ver en esta etiqueta se realiza el binding de la propiedad "root", a la cual asigna el valor de la variable "rootPage". Esta variable se define en la clase del componente principal de la forma:

export class MyApp {
  rootPage:any = HomePage;
}

Por lo tanto, como primera página se carga "HomePage", a partir de la cual podremos ir navegando al resto de páginas.

Abrir y cerrar páginas

Vamos a ver cómo podemos abrir y cerrar páginas, acciones que se corresponderán con apilar y desapilar páginas en la pila de navegación. Para esto en primer lugar creamos una nueva página a la cual queremos navegar:

$ ionic generate page pagina2

Como ya hemos dicho, para poder utilizar una nueva página primero hay que importarla en el módulo principal de la aplicación (app.module.ts) y añadirla a los arrays "declarations" y "entryComponents":

import { Pagina2Page } from '../pages/pagina2/pagina2';

...
declarations: [ ... Pagina2Page ],
entryComponents: [ ... Pagina2Page ],

Y también tendremos que importarla en la página desde la cual la queramos abrir:

import { Pagina2Page } from '../pagina2/pagina2';

Una vez hecho esto ya la podemos utilizar. Lo primero que tendríamos que hacer sería modificar la plantilla y añadir el botón o elemento que abrirá dicha página, en nuestro caso vamos a añadir un botón:

<button ion-button (click)="goPagina2()">Ir a página 2</button>

Como se puede ver, hemos indicado que al hacer clic sobre el botón se ejecute la función "goPagina2()". Por lo tanto, en la clase asociada, tendríamos que declarar la función "goPagina2()" de la forma:

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

    goPagina2():void {
        this.navCtrl.push(Pagina2Page);
    }
}

Esta función hace uso del método "push" de la clase navCtrl para apilar la página a la que queremos ir. La clase navCtrl se inyecta como una dependencia en el constructor.

Ahora vamos a hacer la operación contraria desde la página 2: un botón para volver. Para esto editamos la plantilla y añadimos el siguiente botón:

<button ion-button (click)="goBack()">Volver</button>

Y en la clase asociada definimos la función "goBack()" de la forma:

goBack(): void {
    this.navCtrl.pop();
}

En este caso la función usa también el "navCtrl" pero hace uso de su método pop() para desapilar la última página y así volver a mostrar la página anterior.

Navegación con parámetros

Al método push de navCtrl también se le pueden añadir una serie de parámetros (encapsulados en un objeto) para enviarlos a la página que se va a abrir, por ejemplo:

this.navCtrl.push(Pagina2Page, {param1: 'abc', param2: 123});

Y para recoger los parámetros, en el constructor de la página destino, haríamos:

export class Pagina2Page{
  parameter1: string;
  parameter2: number;
  constructor(public navParams: NavParams){
    this.parameter1 = navParams.get('param1'); 
    this.parameter2 = navParams.get('param2');
  }
}

En este caso utilizamos la clase NavParams para recoger el valor de los parámetros de llamada. En caso de que uno de los parámetros no exista, el método get devolverá "undefined".