Ionic 2 – Events, upravljanje događajima

Prije ili kasnije susrest ćete se s potrebom pokretanja nekog događaja (event) u jednoj komponenti i dohvaćanja tog događaja u drugoj komponenti kao što se dogodilo ovom StackOverflow korisniku, a koji me i potaknuo na objavu ovog blog posta.

Ionic2 events demo Ionic 2 koristi Events API koji omogućava objavu nekog događaja i mogućnost pretplate na taj događaj na razini aplikacije tj. u bilo kojoj drugoj komponenti. Događaj može biti varijabla, objekt ili nekakva funkcija. Ovisi što vam treba.

Recimo da je jedan od scenarija kada se korisnik prijavi u aplikaciju i otvori izbornik (sidemenu) da odmah vidi svoje korisničko ime, sliku i npr. email. S obzirom da se prijava u aplikaciju vrši u jednoj komponenti login.ts, a logika izbornika se nalazi u drugoj komponenti app.component.ts potrebno je nekako omogućiti da komponenta 2 osluškuje što se događa u komponenti 1 i da reagira prema tome.

Kako koristiti Ionic 2 Events?

U nastavku možete vidjeti primjer iz službene Ionic 2 dokumentacije.

import { Events } from 'ionic-angular';

constructor(public events: Events) {}

// first page (publish an event when a user is created)
function createUser(user) {
  console.log('User created!')
  events.publish('user:created', user, Date.now());
}

// second page (listen for the user created event)
events.subscribe('user:created', (user, time) => {
  // user and time are the same arguments passed in `events.publish(user, time)`
  console.log('Welcome', user, 'at', time);
});

Jedino što trebamo napraviti kako bi mogli koristiti Ionic 2 Events je u obje komponente uvesti import { Events } from ‘ionic-angular’;. Znači, nije potrebna instalacija nikakvog dodatka.

Za one koji žele znati više

Obradit ćemo scenarij u kojemu želimo prikazati korisničko ime i email u izborniku (sidemenu) od korisnika koji se upravo prijavio u mobilnu aplikaciju.

U login.ts vršimo prijavu korisnika i ovdje kreiramo događaj _events.subscribe.


import { Events } from 'ionic-angular';
constructor(public _events: Events) {
}

logIn() {
   localStorage.setItem('username', res.username);
   localStorage.setItem('email', res.email);
_events.publish('user:login');
}

U app.component.ts se pretplaćujemo _events.publish na taj događaj.


import { Events } from 'ionic-angular';

constructor(public _events: Events) {
_events.subscribe('user:login', () => {
  this.loggedIn();
});
}

loggedIn() {
   this.username = localStorage.getItem('username');
   this.email = localStorage.getItem('email');
}

Zaključak

I to je sve. Kratak blog post, ali zato vrlo koristan. Za više informacija posjetite službenu dokumentaciju.

Objavio

Tomislav Stanković

Bloger širokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.

Odgovori

Vaša adresa e-pošte neće biti objavljena. Obavezna polja su označena sa *