Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial Ionic 4 / Angular - Enrutador Ionic 4 (Ejemplo de enrutamiento y navegación)

 Agregar enrutamiento a su aplicación Ionic 4 / Angular 6 es un paso esencial para la mayoría de las aplicaciones; por lo tanto, en este tutorial, aprenderemos cómo usar el enrutador Ionic 4 / Angular 6 para crear un ejemplo simple con enrutamiento y navegación entre varias páginas.

En este tutorial, aprenderá sobre:

  • Enrutamiento Ionic 4 usando el enrutador angular
  • Cómo generar páginas Ionic usando Ionic CLI 4
  • El módulo de enrutamiento principal
  • La salida del enrutador iónico <ion-router-outlet>
  • Cómo agregar enlaces de navegación, etc.
  • Cómo Ionic 4 usa la carga diferida angular para las páginas
  • Cómo Ionic 4 usa loadChildren para agregar módulos de carga diferida al enrutador angular

¿Enrutador Ionic 4 o enrutador Angular 6?

Ionic 4 proporciona diferentes mecanismos de enrutamiento. El enrutador Ionic 4 que se basa en componentes web al igual que los otros componentes principales de Ionic. Pero para un proyecto de tipo angular, también puede aprovechar el poderoso enrutador Angular 6 que brinda más funciones para implementar casos de uso avanzados con mayor facilidad. En este tutorial, usaremos el enrutador Angular y Ionic CLI 4 para crear una aplicación de demostración con ejemplos de enrutamiento y navegación. Para cualquier proyecto de tipo angular, notará que el enrutador angular se agrega de forma predeterminada. También notará que las páginas generadas con CLI v4 se agregan automáticamente al módulo de enrutamiento.  

Creación de un nuevo proyecto con Ionic CLI 4

Usaremos Ionic CLI 4 para generar un nuevo proyecto basado en Ionic 4 y Angular 6. En el tutorial anterior, vimos cómo instalar la CLI y configurar el entorno de desarrollo, así que asumiremos que ya lo ha hecho. un entorno de desarrollo listo para completar este tutorial. Ahora, usando su terminal, siga adelante y ejecute el siguiente comando para crear un nuevo proyecto:

$ ionic start ionic4-routing blank --type=angular

Estamos creando un proyecto basado en la plantilla en blanco con el nombre ionic4-routing .

El módulo de enrutamiento angular

El proyecto generado usando Ionic CLI v4 ya está configurado con enrutamiento angular, por lo que no tiene que agregar un módulo de enrutamiento manualmente. El módulo de enrutamiento vive src/app/app-routing.module.tscon el módulo de aplicación principal src/app/app.module.tsy el componente principal src/app/app.component.ts.

Agregar enrutamiento usando el enrutador Angular 6

  Después de crear una nueva aplicación, primero agreguemos algunas páginas. Regrese a su terminal y ejecute el siguiente comando para generar una nueva página llamada lista

$ ionic g page list

Esto creará automáticamente los archivos necesarios para usted.

> ng generate @ionic/schematics-angular:page pages/list - prefix=app
CREATE src/app/pages/list/list.module.ts (533 bytes)
CREATE src/app/pages/list/list.page.scss (0 bytes)
CREATE src/app/pages/list/list.page.html (131 bytes)
CREATE src/app/pages/list/list.page.spec.ts (677 bytes)
CREATE src/app/pages/list/list.page.ts (257 bytes)
UPDATE src/app/app-routing.module.ts (454 bytes)
[OK] Generated page!

A continuación, cree otra página. Llamémoslo detalle usando el siguiente comando:

$ ionic g page detail

Se crearán muchos archivos:

> ng generate @ionic/schematics-angular:page pages/detail - prefix=app
CREATE src/app/pages/detail/detail.module.ts (543 bytes)
CREATE src/app/pages/detail/detail.page.scss (0 bytes)
CREATE src/app/pages/detail/detail.page.html (133 bytes)
CREATE src/app/pages/detail/detail.page.spec.ts (691 bytes)
CREATE src/app/pages/detail/detail.page.ts (265 bytes)
UPDATE src/app/app-routing.module.ts (539 bytes)
[OK] Generated page!

También puede ver que el comando actualiza src/app/app-routing.tscuál es el módulo de enrutamiento angular para nuestro proyecto. Veamos qué hay ahí. Este es el contenido del archivo de enrutamiento:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
 { path: '', redirectTo: 'home', pathMatch: 'full' },
 { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
 { path: 'list', loadChildren: './pages/list/list.module#ListPageModule' },
 { path: 'detail', loadChildren: './pages/detail/detail.module#DetailPageModule' },
];
@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule]
})
export class AppRoutingModule { }

En la matriz de rutas , vemos que se agregan dos rutas:

{ path: 'list', loadChildren: './pages/list/list.module#ListPageModule' },
 { path: 'detail', loadChildren: './pages/detail/detail.module#DetailPageModule' },

Las páginas de Ionic 4 utilizan la carga diferida. Entonces, cada página tiene su propio módulo de enrutamiento. 

En el app-routing.tsusamos loadChildren , que se usa para páginas de carga diferida (módulos). Toma la ruta del módulo en relación con la srccarpeta. Debe pasar la ruta completa del módulo como una cadena y #luego poner el nombre del módulo.

Abra src/app-component.htmlla plantilla del componente principal de la aplicación. Este es el contenido:

<ion-app>
 <ion-router-outlet></ion-router-outlet>
</ion-app>

es un contenedor de nivel superior para otros componentes iónicos es un componente Ionic 4 / Angular que envuelve la salida original del enrutador angular para agregar animaciones.

Publicar un comentario

0 Comentarios