IONIC 5
ROUTING AND NAVIGATION
ING. JEAN CARLOS SARMIENTO
FUENTE:HTTPS://[Link]/IMAGES?Q=TBN%3AAND9GCR391DGLORH6P7B6DRQNMJRSIBZGQWE7MX6AE0HNMSDHKQ5G8TU
¿Cómo funciona?
1. Se configura una ruta para cada página.
NAVEGACIÓN Y 2. Cuando se produce la navegación se
ROUTING analizan las posibles rutas y se ve con cual
hace match.
3. Se procesa cualquier guard relacionada a la
misma.
4. Se activa la página.
5. Se muestra el template.
Router Outlet
•Es una directiva que es usada como un componente.
NAVEGACIÓN Y •Es un placeholder que indica donde se mostrará la
ROUTING página indicada en la ruta.
•Esto hace que el contenido de la página vaya cambiando
de manera dinámica.
•Ejemplo:
<main class="container">
<router-outlet></router-outlet>
<!-- Contenido Dinámico -->
</main>
Router Link
Es una directiva que le permite al elemento donde
NAVEGACIÓN Y ésta es colocada el poder de enrutar. Lo podemos
comparar con el href.
ROUTING
Ejemplo:
<h1>Ionic Router</h1>
<nav>
<a routerLink="/visitors" routerLinkActive="active">Visitantes</a>
<a routerLink="/users" routerLinkActive="active">Usuarios</a>
</nav>
<router-outlet></router-outlet>
Configuración de Rutas
Ejemplo:
NAVEGACIÓN Y const appRoutes: Routes = [
ROUTING { path: 'movies', component: MoviesComponent },
{ path: 'movies/:id', component: MovieDetailsComponent },
{ path: 'dashboard', component: DashboardComponent },
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: '**', redirectTo: 'dashboard', pathMatch: 'full' }
];
Configuración de Rutas
Ejemplo:
NAVEGACIÓN Y const routes: Routes = [
ROUTING {
path: '',
loadChildren: () => import('./tabs/[Link]').then(m => [Link])
},
path: 'detail',
loadChildren: () => import('./detail/[Link]').then( m => [Link])
];
Lectura de Parámetros
Para leer los parámetros de las rutas debemos
NAVEGACIÓN Y importar el ActivatedRoute desde @angular/router.
ROUTING Ejemplo:
import { ActivatedRoute } from '@angular/router';
constructor(private route: ActivatedRoute) {
[Link]([Link]('id'));
}
Navegación
Ejemplo:
NAVEGACIÓN Y import { Router } from '@angular/router';
ROUTING constructor(private router: Router) { }
onBack(): void {
[Link](['/movies']);
}
Guards
•Interfaces que le indican al router si debe
permitir o no la navegación a la ruta solicitada.
NAVEGACIÓN Y • Los 5 tipos son:
ROUTING • CanActivate: Determina si el usuario puede
acceder a una página determinada.
• CanActivateChild: Determina si el usuario puede
acceder a las páginas hijas de una ruta.
• CanDeactivate: Determina si el usuario puede
salir de una página. Con esto se puede mostrar
un mensaje de confirmación en caso de que el
usuario no haya salvado los cambios.
• CanLoad: Con esto se puede evitar que la
aplicación cargue los Módulos que se cargaran
mediante Lazy Loading en caso de que el usuario
no esté autorizado.
• Resolve: Permite cargar cierta data antes de
navegar a un Route determinado.
