Los eventos en Ionic son un sistema de publicación y suscripción que se puede utilizar para pasar mensajes entre distintos componentes y páginas. Aquí veremos un ejemplo sencillo en el que una página publica un evento y una segunda página se suscribe a ese evento. De esta manera, los datos se pueden pasar fácilmente entre las dos.
Inyección del servicio de eventos
El primer paso para que funcione el sistema de eventos es importar e inyectar elEventosservicio tanto en la página de envío como en la de recepción:
página1.ts
import { Component, Events } from 'ionic-angular';página2.ts
import { Component, Events } from 'ionic-angular';Aquí nombramos las instancias inyectadaseventos1yeventos2para mayor claridad, pero ambos pueden inyectarse usando el mismo nombre ya que cada instancia es parte de una clase de página diferente.
Publicación y suscripción a eventos
Ahora que hemos importado e inyectado elEventosservicio en ambas páginas podemos empezar a publicar y suscribirnos a eventos usando el serviciopublicarysuscribirmétodos.
EnPágina 1Publicaremos un mensaje cuando se presione un botón:
página1.ts
handleClick(){ this.events1.publish('my-message', ' Hello from page1!');}Luego en la página 2 nos suscribiremos para recibir mensajes publicados usando elmi mensajetecla (llamada a topicen jónico):
página2.ts
constructor(public events2: Events){ this.events2.subscribe('my-message', (data) ={ console.log(data); // Hello from page1! });}Tan pronto como se publique el evento ypágina 2se inicializa, se activará el evento de suscripción y se ejecutará el código con los datos que se pasan.
Tenga en cuenta que los datos enviados mediantepublicarno tiene por qué ser una cadena y también puede ser un objeto.
Aplicación práctica
Existen muchas aplicaciones prácticas para utilizar el sistema de eventos. Por ejemplo, lo he utilizado para volver a una página mediante el controlador de navegación y, al mismo tiempo, actualizar cierta información en la página a la que se accede.
Normalmente, al navegar a una página usando navControllerempujarmétodo, podemos pasar datos comoparámetros de navegación, pero elestallidoEl método no tiene dicha capacidad, por lo que el servicio de publicación y suscripción de eventos resulta muy útil.
Eche un vistazo a esta mini aplicación, por ejemplo:
juego.ts
import { Component, Events } from 'ionic-angular';import { NavController } from 'ionic-angular';@Component({ selector: 'page-game', templateUrl: 'game.html'})export class GamePage { constructor( public events: Events, public navController: NavController ) { this.events.subscribe('stats', statsData = { console.log(statsData); }); }ganador del show.ts
import { Component, Events } from 'ionic-angular';import { NavController } from 'ionic-angular';@Component({ selector: 'page-show-winner', templateUrl: 'show-winner.html'})export class ShowWinnerPage { constructor( public events: Events, public navController: NavController ) {}Darse de baja
Eleventosservicio en elPagina del juegoLa clase continuará suscripta para recibir mensajes durante la vida útil de la aplicación a menos que se cancele su suscripción mediante algo como esto:
juego.ts
private unsubscribeToEvents() { this.events.unsubscribe('stats', () = { console.log('Unsubscribed!'); });}