Saltar al contenido

Navigation Ionic y su Navcontroller

Navigation Ionic

¿Buscando información sobre NavController, o navigation, del framework Ionic? O, quizás, lo que quieres es saber cómo podemos navegar entre las páginas de nuestra aplicación ¿verdad?

Si la respuesta es sí a cualquiera de estas cuestiones no te preocupes, es muy normal que cuando comenzamos con, o refrescamos, un sistema nuevo surjan este tipo de preguntas.

Es más, diría que hasta los más expertos en el ramo necesitamos de este tipo de artículos cúando vamos a implementar algo que llevamos tiempo sin usar, o es algo que vamos a utilizar por primera vez.

Por si no lo sabes, mi nombre es Aitor Sánchez González y soy desarrollador de apps desde el año 2014, y en este artículo te contaré, de una manera sencilla y práctica, cómo puedes usar la navegación en Ionic y cómo podrás navegar por las páginas de tu app.

Navigation Ionic

Pero antes de continuar, este es El Círculo. Es mi newsletter donde te puedo enseñar desarrollo de apps móviles, aso y monetización. Por cierto, si te suscribes te regalo mi ebook Duplica los ingreso de tus apps en 5 minutos. No es broma.

P.D: Darse de alta es gratis y de baja, también.

 

Cómo configurar NavController

Ahora vamos a ver un ejemplo de código muy sencillo en el que observamos un uso básico, pero funcional, de este módulo, que, por cierto, pertenece al paquete “@angular/core”.

import { NavController } from 'ionic-angular';

class MyComponent {
  constructor(public navCtrl: NavController) {

  }
}

 

 

En primer lugar, necesitamos realizar una importación del módulo NavController en la clase donde lo vayamos a usar.

Posteriormente, y como en la mayoría de los componentes, necesitamos realizar una inyección en el constructor para poder utilizarlo.

Y listo, ya tenemos todo preparado para empezar a utilízalo.

 

Navigation Ionic, como se usa

Nota: El trasfondo del componente es, en pocas palabras, un array que almacena el uso de la aplicación para poder controlar si avanzando o si volvemos atrás sobre el Navigation. Lo mete todo en una pila y va añadiendo o quitando páginas a nuestra voluntad. Ya sean páginas, como tal, o tabs. Es el mismo componente que el navcontroller de Angular, por si lo has utilizado alguna vez.

En el punto anterior hemos visto cómo se configura el módulo, ahora vamos a ver como lo podemos usar.

Primero hay que explicar que existen 2 tipo de datos dentro del array que hemos explicado más arriba. Uno es el Root Page y otro son el resto de las ventanas agregadas. Definiendo Root Page como la página principal o primaria.

 

La Root Page y cómo podemos cambiar de página con Navigation

Bien, ahora tendremos que fijarnos muy bien la etiqueta ion-nav. Esta etiqueta será la más importante del siguiente ejemplo:

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
   template: '<ion-nav #myNav [root]="rootPage"></ion-nav>'
})
export class MyApp {
   @ViewChild('myNav') nav: NavController
   public rootPage: any = TabsPage;

   // Wait for the components in MyApp's template to be initialized
   // In this case, we are waiting for the Nav with reference variable of "#myNav"
   ngOnInit() {
      // Let's navigate from TabsPage to Page1
      this.nav.push(Page1);
   }
}

 

Otra cosa importante, fíjate bien cómo accedemos al navctrl. Lo referenciamos en nuestro código TS mediante el decorador @ViewChild.

Una vez que abrimos la app por primera vez, el mismo sistema nos pone por defecto en el Root Page la primera página de la aplicación. Siempre y cuando no lo hayamos configurado de otra manera de forma explícita.

En el código vemos cómo podemos hacer un push de otra página sobre la página principal. De esta manera logramos que el usuario vea otra página y esta, la que estamos pusheando, se meta dentro del array de páginas que lleva el sistema navController.

En caso de que pulsemos sobre el botón “atrás” o le digamos explícitamente, ves hacia atrás, que lo veremos más abajo, esta página será eliminada de la cola, y volveremos a la página anterior. En este caso concreto, la Root Page.

 

Cambiar el Root Page, o página raíz

Nota: Si no sabes lo que es la página raíz, será la página que está en la posición 0 del stack. La página que una vez en ella al pulsar sobre el botón «back» se saldrá de la aplicación.

Por otro lado, y como era de esperar, se puede cambiar la Root Page de la app. Para que, en el siguiente cambio de ventana, esta pase a ser la principal. Recuerda que esta función elimina toda la cola anterior y pone esta página, la que le vamos a pasar, como principal.

setRoot(newRootPage){
    this.nav.setRoot(newRootPage);
}

 

Como vemos en el ejemplo (este es muy sencillo), llamamos a la función setRoot del navController y le pasamos la nueva ventana. A partir de ahora toda la pila comenzará a partir de ahí.

 

Quitando vistas del stack

Aunque antes hemos visto un poco como se realiza este paso, vamos a especificar y ahondar un poquito más sobre esta funcionalidad.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  template: `
  <ion-header>
    <ion-navbar>
      <ion-title>Other Page</ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>I'm the other page!</ion-content>`
})
class OtherPage {
   constructor(public navCtrl: NavController ){
   }

   popView(){
     this.navCtrl.pop();
   }
}

 

 

La verdad que es algo sencillo. Con el método “pop()” hacemos que el stack retroceda en un espacio. La lógica es la misma que cuando pulsamos sobre el botón “back” del dispositivo. Es más, por debajo, al pulsar “back” se ejecuta el mismo código, a excepción de que hayamos sobrescrito la lógica de este.

 

Ciclos de vida de una vista sobre la navegación / navigation

Ahora vamos a pasar a comentar el ciclo de vida de una vista, y los eventos que se ejecutan. Eventos que podemos sobrescribir para darles la funcionalidad que nosotros queramos.

  • ionViewDidLoad -> void -> Se ejecuta cuando la página ha sido cargada. Se suele para configurar toda la parte previa a la muestra del usuario.
  • ionViewWillEnter -> void -> Se ejecuta cuando la página está a punto de mostrarse y se convierte en página activa.
  • ionViewDidEnter -> void -> Se ejecuta cuando la página acaba de mostrarse y está activa. Se ejecutará ya sea la primera vez que se carga la página o sea una página cacheada.
  • ionViewWillLeave -> void -> Se ejecuta cuando la página está a punto de desaparecer y ya no está activa.
  • ionViewDidLeave -> void -> Se ejecuta cuando la página ya ha desaparecido y no está activa.
  • ionViewWillUnload -> void -> Se ejecuta cuando la página está a punto de destruirse y ya no tiene elementos.
  • ionViewCanEnter -> boolean/promise -> Se ejecuta después de que la página este mostrándose y activa.
  • ionViewCanLeave -> boolean/promise -> Se ejecuta cuando ya se ha salido de la página en cuestión.

 

Nav Guards, o como interceptar vistas.

En determinadas ocasiones, se nos plantea el problema de que tenemos que controlar cuando un usuario entra o sale de una determinada página/ventana. Hemos visto los métodos antes, los dos últimos, ionViewCanEnter y ionViewCanLeave. Solo tendremos que sobrescribirlos y ya podremos tomar acción sobre lo que hace el usuario dentro de la pantalla.

Ahora veamos un ejemplo que se aprecia mucho mejor.

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

  pushPage(){
    this.navCtrl.push(DetailPage);
  }

  ionViewCanLeave(): boolean{
   // here we can either return true or false
   // depending on if we want to leave this view
   if(isValid(randomValue)){
      return true;
    } else {
      return false;
    }
  }
}

 

 

NavOptions y cómo se aplican

Los métodos de NavController que nos permite cambiar de página pueden recibir unos parámetros con los que podemos cambiar el comportamiento de esta.

  • animate -> boolean -> Si quieres que la transición de ventanas se anime.
  • animation -> string -> La animación que queremos aplicar en esta.
    • md-transition
    • ios-transition
    • wp-transition
  • direction -> string -> La dirección conceptual que queremos que realice la transición.
    • forward -> La transición se hará de derecha a izquierda.
    • back -> La transición se hará de izquierda a derecha.
  • duration -> number -> El tiempo que queramos que dure la transición.
  • easing -> string -> La flexibilidad de la animación.

 

Cómo usar la clase LocationStrategy del NavController para navegar al forward y al backward

El router de Angular tiene un método llamado LocationStrategy.historyGo que permite a los desarrolladores moverse al forward y al backward mediante el histórico de ventanas de la aplicación. Veamos un ejemplo que lo entenderás mejor.

Digamos que tenemos el siguiente histórico de navegación:

/pageA –> /pageB –> /pageC

Si llamas a «LocationStrategy.historyGo(-2) desde la página «/pageC», volverias a la página «/pageA». Si después lo usamos así: «LocationStrategy.historyGo(2), volveremos a la página «/pageC».

A parte, esta clase tiene campos y métodos para conocer más detalles sobre el histórico de navegación que te invito a que revises por tu cuenta.

Lo último a comentar aquí, es que si la aplicación no hace una carga lineal de la navegación, es aconsejable que montes un servicio que te permita saber dónde está el usuario en todo momento y las página por las que ha pasado.

 

Funciones y campos del NavController

Como ya tenemos una idea bastante amplia de lo que es el NavController y el Navigation y de cómo podemos usarlo, vamos a ver de manera más avanzada lo que podemos hacer con ella. Mediante sus funciones y campos de clase.

 

canGoBack()

Esta función nos permite comprobar si podemos usar “NavController.pop()” o el botón de retroceder sin que la aplicación se cierre. También nos permite conocer si estamos sobre la Root Page.

  • Retorno -> booleano -> Nos permite conocer si hay más páginas en el stack de páginas.

 

canSwipeBack()

Lo mismo que la función anterior, pero en caso de usar el botón “back” es para comprobar si podemos hacer “swipe back”.

  • Retorno -> booleano -> Nos permite conocer si podemos hacer swipeBack.

 

firts()

Retorna la primera vista que está en el Stack del navController / Navigation

  • Retorno -> ViewController

 

getActive()

Retorna la página activa en el stack de navController

  • Retorno -> ViewController

 

getActiveChildNav()

Retorna el ítem que está activo de la navegación. Por Ejemplo: Si tenemos un menú que tiene “fruta”, “verdura” y “carne” y actualmente estamos viendo “verdura” esta función devolverá el controlador de “verdura”.

  • Retorno -> ViewController

 

getActiveChildNavs()

Similar al anterior, pero con retorno múltiple.

 

getAllChildNavs()

Esta función nos permite conocer todas las opciones que tenemos disponibles en la navegación.

 

getByIndex(index)

Esta función nos devuelve, sobre la pila de páginas, la que nosotros le especifiquemos por parámetro.

  • Index -> number -> El índice que queremos obtener de la pila de páginas.
  • Retorno -> ViewController.

 

getPrevious(view)

Retorna la vista anterior a la que le especifiquemos por parámetros.

  • View -> ViewController -> Es la vista de la que queremos sacar la anterior.
  • Retorno -> ViewController -> La vista anterior a la que le hemos especificado en el punto anterior.

 

getSecondaryIdentifier()

 

getType()

 

getViews()

Retorna todo el stack de páginas que tenemos agendadas en el “navController”.

  • Retorno -> Array<ViewController>

 

getToRoot()

 

indexOf(view)

Esta función nos permite conocer la posición, dentro del índice del stack, de una vista en el Navigation.

  • View -> ViewController -> La vista de la que queremos conocer el índice
  • Retorno -> number -> Es la posición en el índice de la vista solicitada.

 

insert(index, page, params, opts)

Esta función nos permite meter una página dentro del Stack del navController.

  • insertIndex -> number -> El índice dentro del stack en el que queremos que se posicione la vista.
  • Page -> string -> La ruta interna de la página que queremos agregar al stack.
  • Params -> object -> Si queremos que tenga parámetros, aquí se lo tenemos que especificar.
  • Opts -> object -> En caso de que necesitemos definir opciones de transición y demás, como vimos antes en el artículo, este es el lugar.
  • Retorno -> promise -> Una promesa que tenemos que controlar. Se resolverá cuando la transición haya terminado.

 

isActive(view)

Nos permite conocer si la vista en cuestión está activa.

  • View -> ViewController -> La vista de la que queremos conocer los datos.
  • Retorno -> boolean -> Si es verdadero, la vista que le hemos solicitado está activa.

 

isTransitioning()

Nos permite conocer si la vista actual está en fase de transición o no.

  • Retorno -> booleano -> Si es verdadero, la transición aún no ha terminado.

 

last()

Retorna la última página en el Stack de páginas del NavController.

  • Retorno -> ViewController -> La vista siguiente a la que está activa.

 

lenght()

Retorna el número de vistas que hay en el Stack del navController.

  • Retorno -> number -> La longitud del stack.

 

parent

Este campo contiene el padre de la vista que está activa en la actualidad. En caso de que sea el Root Page, parent es igual a null.

 

pop(options)

Esta función nos permite navegar a la página anterior del stack del navController.

  • Options -> object -> Son las opciones de transición de la navegación cuando volvemos atrás.
  • Retorno -> promise -> Una promesa que se resolverá cuando haya terminado la transición.

 

popToRoot(options)

Similar a la anterior, pero en lugar de llevarnos una página atrás, nos llevará hasta el RootPage.

  • Options -> object -> Las opciones de transición que queremos que se apliquen.
  • Retorno -> promise -> Una promesa que tenemos que controlar. Se resolverá cuando la transición haya terminado.

 

push(pare, params, options)

Esta función, como ya hemos visto en ejemplos anteriores, nos permite meter una vista dentro del Stack. Los params serán accesibles desde la clase “NavParams” en la clase objetivo.

  • Pare -> string -> La ruta del componente que queremos agregar al stack.
  • Params -> object -> Los parámetros que queremos enviar a la clase objetivo.
  • Options -> object -> Las opciones de transición que queremos que se ejecuten cuando hace el cambio de página.
  • Retorno -> promise -> Una promesa que se resolverá cuando termine la transición.

 

remove(starIndex, removeCount, options)

Como su propio nombre indica, nos permite eliminar páginas del Stack del navController. Desde un índice dado hasta la cantidad de páginas que queremos eliminar.

  • startIndex -> number -> La posición inicial desde la que queremos comenzar a borrar. Por defecto es la última página del Stack.
  • removeCount -> number -> La cantidad de páginas que queremos eliminar. Por defecto, 0.
  • Options -> object -> Los ajustes de transición del cambio de pantalla.
  • Retorno -> promise -> Se resolverá cuando la transición haya terminado.

 

removeView(view, options)

Elimina la página en cuestión del Stack del Navigation.

  • View -> viewController -> La vista en cuestión que queremos eliminar del Stack.
  • Options -> object -> Las opciones de transición.
  • Retorno -> promise -> Se resolverá cuando la transición haya terminado.

 

setPages(pages, options)

Con esta función podemos agregar vistas al stack de navegación a continuación de la última vista que esté agregada. Por defecto, las opciones de transición estarán desactivadas, pero ahora veremos cómo las podemos activar.

  • Pages -> Array<{page: any, params: any}> -> Estas son las páginas que vamos a agregar al Stack. Pero como puedes observar, cada una de ellas es un objeto que contiene:
    • Page -> string -> Será la ruta de la página en cuestión.
    • Params -> object -> los parámetros que le queremos pasar a la vista.
  • Options -> object -> Estos serán las opciones de transición de todas las páginas en conjunto.
  • Retorno -> promise -> Una promesa que se ejecutará cuando la transición haya terminado.

 

setRoot(page, params, options, done)

Con esta función lo que logramos es definir un nuevo Root Page al sistema eliminando así todo el Stack anterior del Navigation.

  • Page -> string | viewController -> Será la página que en este momento, después de usar la función, será el RootPage.
  • Params -> object -> En caso de que queramos pasar parámetros, este es el sitio.
  • Options -> object -> Las opciones de transición
  • Done -> function -> En caso de que queramos ejecutar una función cuando haya terminado, este es el lugar.
  • Retorno -> promise -> Se resolverá cuando la transición haya terminado.

 

Más tutoriales de Ionic

 

Y para los más ganduletes, el tutorial en vídeo de Navigation Ionic…

 

Pues esto ha sido todo compañero/a, sé que ha sido un artículo denso y pesado. Pero a quien algo quiere, algo le cuesta. Pero creme, si controlas esto tal cual lo he explicado estarás en disposición de hacer lo que te dé la gana con la navegación.

Ahora solo queda despedirme y decir que, gracias por estar ahí, como siempre y que nos vemos en el siguiente artículo… Un saludo 🙂