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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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.
|
1 2 3 4 5 6 7 8 9 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
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.
