El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Navegación y Enrutamiento

Siguiente ►
►

En este tema, aprenderemos cómo manejar la navegación y el enrutamiento en una aplicación Ionic. La navegación es un aspecto crucial en cualquier aplicación móvil, ya que permite a los usuarios moverse entre diferentes vistas y funcionalidades. Ionic utiliza Angular Router para gestionar la navegación, lo que facilita la creación de rutas y la gestión del estado de la aplicación.

Contenidos

  1. Conceptos Básicos de Navegación
  2. Configuración de Rutas
  3. Navegación Programática
  4. Pasar Datos entre Páginas
  5. Ejercicio Práctico
  6. Resumen

Conceptos Básicos de Navegación

La navegación en Ionic se basa en el enrutamiento de Angular. Aquí hay algunos conceptos clave:

  • Rutas: Definen los caminos en la URL que llevan a diferentes componentes.
  • Router Outlet: Un contenedor donde se cargan los componentes basados en la ruta activa.
  • RouterLink: Una directiva que permite la navegación declarativa en las plantillas.

Configuración de Rutas

Para configurar las rutas en una aplicación Ionic, necesitamos definirlas en el archivo app-routing.module.ts. Aquí hay un ejemplo básico:

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'details',
    loadChildren: () => import('./details/details.module').then(m => m.DetailsPageModule)
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Explicación del Código

  • Routes Array: Define un array de objetos de ruta. Cada objeto tiene un path y un loadChildren que carga el módulo correspondiente.
  • RouterModule.forRoot: Configura el enrutador a nivel de aplicación.
  • PreloadAllModules: Estrategia de precarga que carga todos los módulos de forma predeterminada.

Navegación Programática

Además de la navegación declarativa, también podemos navegar programáticamente usando el Router de Angular.

Ejemplo

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

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage {

  constructor(private router: Router) { }

  navigateToDetails() {
    this.router.navigate(['/details']);
  }
}

Explicación del Código

  • Router: Inyectamos el servicio Router en el constructor.
  • navigateToDetails: Método que utiliza this.router.navigate para navegar a la página de detalles.

Pasar Datos entre Páginas

Podemos pasar datos entre páginas utilizando el estado de navegación o parámetros de ruta.

Usando Parámetros de Ruta

Envío de Datos

this.router.navigate(['/details', { id: 42 }]);

Recepción de Datos

import { ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {
  this.route.params.subscribe(params => {
    console.log(params['id']);
  });
}

Usando el Estado de Navegación

Envío de Datos

this.router.navigate(['/details'], { state: { example: 'data' } });

Recepción de Datos

import { Router } from '@angular/router';

constructor(private router: Router) {
  const navigation = this.router.getCurrentNavigation();
  const state = navigation.extras.state as { example: string };
  console.log(state.example);
}

Ejercicio Práctico

Objetivo

Crear una aplicación simple con dos páginas: Home y Details. La página Home tendrá un botón que navega a la página Details y pasa un mensaje.

Pasos

  1. Crear Páginas: Usa el CLI de Ionic para generar las páginas.

    ionic generate page home
ionic generate page details

  2. Configurar Rutas: Añade las rutas en app-routing.module.ts.

    const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) },
  { path: 'details', loadChildren: () => import('./details/details.module').then(m => m.DetailsPageModule) }
];

  3. Navegación y Pasar Datos:

    • En home.page.ts:

      import { Router } from '@angular/router';

constructor(private router: Router) { }

navigateToDetails() {
  this.router.navigate(['/details'], { state: { message: 'Hello from Home!' } });
}

    • En home.page.html:

      <ion-button (click)="navigateToDetails()">Go to Details</ion-button>

    • En details.page.ts:

      import { Router } from '@angular/router';

constructor(private router: Router) {
  const navigation = this.router.getCurrentNavigation();
  const state = navigation.extras.state as { message: string };
  console.log(state.message);
}

  4. Verificar: Ejecuta la aplicación y verifica que la navegación y el paso de datos funcionen correctamente.

Resumen

En esta sección, hemos aprendido los conceptos básicos de la navegación y el enrutamiento en Ionic. Hemos configurado rutas, realizado navegación programática y pasado datos entre páginas. Estos conceptos son fundamentales para crear aplicaciones móviles complejas y bien estructuradas. En el próximo módulo, exploraremos los componentes básicos de Ionic y cómo utilizarlos para construir interfaces de usuario atractivas y funcionales.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados