Un proyecto de Angular ya sea para web o para móvil a través de Ionic suele utilizar una serie de páginas web, realmente Angular solo carga una web en el navegador, el resto de las páginas tienen carácter virtual, son contenidos que el motor de Angular va volcando en pantalla.
Para poder transmitir datos entre páginas hace un tiempo tenías que crear un servicio, dentro de él crear unas propiedades, importar el servicio en las páginas que fuesen a hacer uso de él y de esta manera a través de las propiedades del servicio podías transmitir valores.
Desde Angular 7 este proceso es mucho más sencillo. Os voy a explicar de modo sencillo como se hace.
En la página origen, dentro de su fichero .ts tenéis que importar Router y NavigationExtras:
import { Router, NavigationExtras } from '@angular/router';
A continuación dentro del método elegido para cambiar página debéis agregar propiedades con valor a NavigationExtras y navegar a la página destino:
let navigationExtras: NavigationExtras = {
state: {
dato: "hola"
}
};
this.router.navigate(['pagina-destino'], navigationExtras);
En la página destino de nuevo volvemos a importar las librerías Router y NavigationExtras:
import { Router } from '@angular/router';
Y en la página destino para leer los datos lo haremos de la siguiente manera:
this.route.queryParams.subscribe(params => {
if (this.router.getCurrentNavigation().extras.state) {
this.dato = this.router.getCurrentNavigation().extras.state.dato;
}
});
No os olvidéis de agregar en los constructores los parámetros de Router: private router:Router
Tengo que encontrar la manera de mostrar ejemplos de Angular en el blog de manera más interactiva.
Como veis es un sistema muy sencillo que mejora mucho el sistema anterior.
Espero que os sea de utilidad ^_^.
Comentarios