Ionic 4 & Angular Router – prosljeđivanje parametara

Ionic 4 & Angular Router – prosljeđivanje parametara

Sličan blog post, pod naslovom “Ionic 2 – prosljeđivanje parametara između stranica“, sam već objavio, ali vrijeme je za novi jer Ionic 4 više ne radi isključivo na dosadašnji pop/push način, nego koristi Angular Router, pod uvjetom da se koristi i Angular Framework u pozadini.

Kreiranje projekta

Novi Ionic 4 projekt kreiram već dobro poznatom naredbom:

U ovom koraku trebam postaviti temelj tj. na HomePage komponenti gdje ću kreirati dva gumba kako bi mogao prikazati dva načina za prosljeđivanje parametara.

Na ekranu će to izgledati ovako:

Ionic 4 & Angular Router

Osim toga, moram pripremiti i neke podatke, about objekt, koje ću prosljeđivati na sljedeću stranicu.

Sada mogu kreirati stranicu na koju ću proslijediti podatke i prikazati ih. To činim pomoću naredbe:

Ionic 4 & Angular Router

Prosljeđeni podaci će na ovom ekranu biti prikazani na sljedeći način:

Ionic 4 & Angular Router

Sada napokon mogu pokazati kako proslijediti podatke tj. parametre sa HomePage na DetailsPage na dva načina.

Prosljeđenim ću parametrima pristupiti kroz ActivatedRoute.

Query Params

Ovaj način je najčešći s kojim sam se susretao i ok je ako se radi mobilna aplikacija kojoj će se pristupati kroz npr. Google Play Store jer se u tom slučaju neće vidjeti URL svake od stranica.

Podatke prosljeđujem sa HomePage

Na DetailsPage podatke dohvaćam na sljedeći način:

U praksi to izgleda ovako:

Ionic 4 & Angular Router

Navigation Extras State

Kako bi ovo funkcioniralo potrebno je koristiti Angular 7.2 ili noviju verziju.

State passed to any navigation. This value will be accessible through the extras object returned from router.getCurrentNavigation() while a navigation is executing. Once a navigation completes, this value will be written to history.state when the location.go or location.replaceState method is called before activating of this route. Note that history.state will not pass an object equality test because the navigationId will be added to the state before being written.

While history.state can accept any type of value, because the router adds the navigationId on each navigation, the state must always be an object. – NavigationExtras

Ovo rješenje je slično onome iznad s tom razlikom što izgleda ljepše kada je vidljiv URL jer se parametri ne vide. To je posebno korisno kada se radi Ionic Progressive Web App.

Podatke prosljeđujem sa HomePage

Na DetailsPage podatke dohvaćam na sljedeći način:

U praksi to izgleda ovako:

Ionic 4 & Angular Router

Zaključak

Struktura projekta prema package.json

Objavio

Tomislav Stanković

Web Developer - JavaScript, TypeScript, Angular, ExpressJS, Ionic Framework

Odgovori

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