{"id":10152,"date":"2019-05-27T20:13:37","date_gmt":"2019-05-27T18:13:37","guid":{"rendered":"https:\/\/www.tomislavstankovic.com\/blog\/?p=10152"},"modified":"2019-05-29T22:02:51","modified_gmt":"2019-05-29T20:02:51","slug":"ionic-4-angular-router","status":"publish","type":"post","link":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/","title":{"rendered":"Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara"},"content":{"rendered":"

Sli\u010dan blog post, pod naslovom “Ionic 2 \u2013 proslje\u0111ivanje parametara izme\u0111u stranica<\/a><\/em>“, sam ve\u0107 objavio, ali vrijeme je za novi jer Ionic 4<\/em> vi\u0161e ne radi isklju\u010divo na dosada\u0161nji pop\/push<\/a><\/em> na\u010din, nego koristi Angular Router<\/a><\/em>, pod uvjetom da se koristi i Angular Framework<\/a><\/em> u pozadini. <\/p>\n

Kreiranje projekta<\/h2>\n

Novi Ionic 4<\/em> projekt<\/a> kreiram ve\u0107 dobro poznatom naredbom:<\/p>\n

$ ionic start Ionic4AngularRouter blank\r\n$ cd Ionic4AngularRouter<\/pre>\n
U ovom koraku trebam postaviti temelj tj. na HomePage<\/span> komponenti gdje \u0107u kreirati dva gumba kako bi mogao prikazati dva na\u010dina za proslje\u0111ivanje parametara.<\/p>\n
<ion-header>\r\n  <ion-toolbar color=\"primary\">\r\n    <ion-title>\r\n      Ionic 4 - Angular Router\r\n    <\/ion-title>\r\n  <\/ion-toolbar>\r\n<\/ion-header>\r\n\r\n<ion-content padding>\r\n  <ion-button expand=\"full\" color=\"dark\" (click)=\"queryParamsFunction()\">\r\n    Query Params\r\n  <\/ion-button>\r\n \r\n  <ion-button expand=\"full\" color=\"dark\" (click)=\"navigationExtrasFunction()\">\r\n    Navigation Extras\r\n  <\/ion-button>\r\n<\/ion-content><\/pre>\n
Na ekranu \u0107e to izgledati ovako:<\/p>\n
\"Ionic<\/a><\/p>\n
Osim toga, moram pripremiti i neke podatke, about<\/span> objekt, koje \u0107u proslje\u0111ivati na sljede\u0107u stranicu. <\/p>\n
import { Component } from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'app-home',\r\n  templateUrl: 'home.page.html',\r\n  styleUrls: ['home.page.scss'],\r\n})\r\nexport class HomePage {\r\n\r\n  about = {\r\n    name: 'Tomislav Stankovi\u0107',\r\n    website: 'www.tomislavstankovic.com',\r\n    interests: [\r\n      'Ionic', 'Angular', 'NodeJS'\r\n    ]\r\n  };\r\n\r\n  constructor() {}\r\n\r\n  queryParamsFunction(){}\r\n\r\n  navigationExtrasFunction(){}\r\n\r\n}<\/pre>\n
Sada mogu kreirati stranicu na koju \u0107u proslijediti podatke i prikazati ih. To \u010dinim pomo\u0107u naredbe:<\/p>\n
$ ionic generate page details<\/pre>\n
\"Ionic<\/a><\/p>\n
Proslje\u0111eni podaci \u0107e na ovom ekranu biti prikazani na sljede\u0107i na\u010din:<\/p>\n
\r\n  \r\n    \r\n      <\/ion-back-button>\r\n    <\/ion-buttons>\r\n    Angular Router \/ Details<\/ion-title>\r\n  <\/ion-toolbar>\r\n<\/ion-header>\r\n \r\n\r\n\r\n  \r\n    \r\n      {{ data.name }}\r\n    <\/ion-card-title>\r\n    \r\n        {{ data.website }}\r\n    <\/ion-card-subtitle>\r\n  <\/ion-card-header>\r\n  \r\n    \r\n      {{ i }}\r\n    <\/ion-item>\r\n  <\/ion-card-content>\r\n<\/ion-card>\r\n<\/ion-content><\/pre>\n
\"Ionic<\/a><\/p>\n
Sada napokon mogu pokazati kako proslijediti podatke tj. parametre sa HomePage<\/span> na DetailsPage<\/span> na dva na\u010dina.<\/p>\n
Proslje\u0111enim \u0107u parametrima pristupiti kroz ActivatedRoute<\/a><\/em>.<\/p>\n
Query Params<\/h2>\n
Ovaj na\u010din je naj\u010de\u0161\u0107i s kojim sam se susretao i ok je ako se radi mobilna aplikacija kojoj \u0107e se pristupati kroz npr. Google Play Store<\/a><\/em> jer se u tom slu\u010daju ne\u0107e vidjeti URL<\/em> svake od stranica. <\/p>\n
http:\/\/localhost:8101\/details?aboutData=%7B%22name%22:%22Tomislav%20Stankovi%C4%87%22,%22website%22:%22www.tomislavstankovic.com%22,%22interests%22:%5B%22Ionic%22,%22Angular%22,%22NodeJS%22%5D%7D<\/pre>\n
Podatke proslje\u0111ujem sa HomePage<\/span><\/p>\n
import { Component } from '@angular\/core';\r\nimport { Router } from '@angular\/router';\r\n\r\n@Component({\r\n  selector: 'app-home',\r\n  templateUrl: 'home.page.html',\r\n  styleUrls: ['home.page.scss'],\r\n})\r\nexport class HomePage {\r\n\r\n  about = {\r\n    name: 'Tomislav Stankovi\u0107',\r\n    website: 'www.tomislavstankovic.com',\r\n    interests: [\r\n      'Ionic', 'Angular', 'NodeJS'\r\n    ]\r\n  };\r\n\r\n  constructor(private _router: Router) {}\r\n\r\n  queryParamsFunction(){\r\n    this._router.navigate(['\/details'], \r\n       { queryParams: \r\n           { aboutData: JSON.stringify(this.about) }\r\n       }\r\n    );\r\n  }\r\n\r\n  navigationExtrasFunction(){}\r\n\r\n}<\/pre>\n
Na DetailsPage<\/span> podatke dohva\u0107am na sljede\u0107i na\u010din:<\/p>\n
import { Component, OnInit } from '@angular\/core';\r\nimport { ActivatedRoute } from '@angular\/router';\r\n\r\n@Component({\r\n  selector: 'app-details',\r\n  templateUrl: '.\/details.page.html',\r\n  styleUrls: ['.\/details.page.scss'],\r\n})\r\nexport class DetailsPage implements OnInit {\r\n\r\n  data: any;\r\n\r\n  constructor(private _activatedRoute: ActivatedRoute) { \r\n\r\n   this._activatedRoute.queryParams.subscribe(params => {\r\n        if (params && params.aboutData) {\r\n            this.data = JSON.parse(params.aboutData);\r\n            console.log(this.data);\r\n        }\r\n    });  \r\n\r\n  }\r\n\r\n   ngOnInit() {}\r\n\r\n}<\/pre>\n
U praksi to izgleda ovako:<\/p>\n
\"Ionic<\/a><\/p>\n
Navigation Extras State<\/h2>\n
Kako bi ovo funkcioniralo potrebno je koristiti Angular 7.2<\/a><\/em> ili noviju verziju.<\/p>\n
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.<\/p>\n
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<\/a><\/p><\/blockquote>\n
Ovo rje\u0161enje je sli\u010dno onome iznad s tom razlikom \u0161to izgleda ljep\u0161e kada je vidljiv URL<\/em> jer se parametri ne vide. To je posebno korisno kada se radi Ionic Progressive Web App<\/a><\/em>.<\/p>\n
http:\/\/localhost:8101\/details<\/pre>\n
Podatke proslje\u0111ujem sa HomePage<\/span> <\/p>\n
import { Component } from '@angular\/core';\r\nimport { Router, NavigationExtras } from '@angular\/router';\r\n\r\n@Component({\r\n  selector: 'app-home',\r\n  templateUrl: 'home.page.html',\r\n  styleUrls: ['home.page.scss'],\r\n})\r\nexport class HomePage {\r\n\r\n  about = {\r\n    name: 'Tomislav Stankovi\u0107',\r\n    website: 'www.tomislavstankovic.com',\r\n    interests: [\r\n      'Ionic', 'Angular', 'NodeJS'\r\n    ]\r\n  };\r\n\r\n  constructor(private _router: Router) {}\r\n\r\n  queryParamsFunction(){}\r\n\r\n  navigationExtrasFunction(){\r\n    let navigationExtras: NavigationExtras = {\r\n      state: {\r\n        aboutData: this.about\r\n      }\r\n    };\r\n    this._router.navigate(['\/details'], navigationExtras);\r\n  }\r\n\r\n}<\/pre>\n
Na DetailsPage<\/span> podatke dohva\u0107am na sljede\u0107i na\u010din:<\/p>\n
import { Component, OnInit } from '@angular\/core';\r\nimport { ActivatedRoute, Router } from '@angular\/router';\r\n\r\n@Component({\r\n  selector: 'app-details',\r\n  templateUrl: '.\/details.page.html',\r\n  styleUrls: ['.\/details.page.scss'],\r\n})\r\nexport class DetailsPage implements OnInit {\r\n\r\n  data: any;\r\n\r\n  constructor(private _activatedRoute: ActivatedRoute,\r\n              private _router: Router) { \r\n\r\n      this._activatedRoute.queryParams.subscribe(params => {\r\n          if (this._router.getCurrentNavigation().extras.state) {\r\n              this.data = this._router.getCurrentNavigation().extras.state.aboutData;\r\n              console.log(this.data);\r\n          }\r\n      });\r\n\r\n  }\r\n\r\n   ngOnInit() {\r\n  }\r\n\r\n}<\/pre>\n
U praksi to izgleda ovako:<\/p>\n
\"Ionic<\/a><\/p>\n
Zaklju\u010dak<\/h2>\n
Struktura projekta prema package.json<\/strong><\/em><\/p>\n
{\r\n  \"name\": \"Ionic4AngularRouter\",\r\n  \"version\": \"0.0.1\",\r\n  \"author\": \"Tomislav Stankovi\u0107\",\r\n  \"homepage\": \"https:\/\/www.tomislavstankovic.com\/\",\r\n  \"scripts\": {\r\n    \"ng\": \"ng\",\r\n    \"start\": \"ng serve\",\r\n    \"build\": \"ng build\",\r\n    \"test\": \"ng test\",\r\n    \"lint\": \"ng lint\",\r\n    \"e2e\": \"ng e2e\"\r\n  },\r\n  \"private\": true,\r\n  \"dependencies\": {\r\n    \"@angular\/common\": \"^7.2.2\",\r\n    \"@angular\/core\": \"^7.2.2\",\r\n    \"@angular\/forms\": \"^7.2.2\",\r\n    \"@angular\/http\": \"^7.2.2\",\r\n    \"@angular\/platform-browser\": \"^7.2.2\",\r\n    \"@angular\/platform-browser-dynamic\": \"^7.2.2\",\r\n    \"@angular\/router\": \"^7.2.2\",\r\n    \"@ionic-native\/core\": \"^5.0.0\",\r\n    \"@ionic-native\/splash-screen\": \"^5.0.0\",\r\n    \"@ionic-native\/status-bar\": \"^5.0.0\",\r\n    \"@ionic\/angular\": \"^4.1.0\",\r\n    \"core-js\": \"^2.5.4\",\r\n    \"rxjs\": \"~6.5.1\",\r\n    \"tslib\": \"^1.9.0\",\r\n    \"zone.js\": \"~0.8.29\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"@angular-devkit\/architect\": \"~0.13.8\",\r\n    \"@angular-devkit\/build-angular\": \"~0.13.8\",\r\n    \"@angular-devkit\/core\": \"~7.3.8\",\r\n    \"@angular-devkit\/schematics\": \"~7.3.8\",\r\n    \"@angular\/cli\": \"~7.3.8\",\r\n    \"@angular\/compiler\": \"~7.2.2\",\r\n    \"@angular\/compiler-cli\": \"~7.2.2\",\r\n    \"@angular\/language-service\": \"~7.2.2\",\r\n    \"@ionic\/angular-toolkit\": \"~1.5.1\",\r\n    \"@types\/node\": \"~12.0.0\",\r\n    \"@types\/jasmine\": \"~2.8.8\",\r\n    \"@types\/jasminewd2\": \"~2.0.3\",\r\n    \"codelyzer\": \"~4.5.0\",\r\n    \"jasmine-core\": \"~2.99.1\",\r\n    \"jasmine-spec-reporter\": \"~4.2.1\",\r\n    \"karma\": \"~4.1.0\",\r\n    \"karma-chrome-launcher\": \"~2.2.0\",\r\n    \"karma-coverage-istanbul-reporter\": \"~2.0.1\",\r\n    \"karma-jasmine\": \"~1.1.2\",\r\n    \"karma-jasmine-html-reporter\": \"^0.2.2\",\r\n    \"protractor\": \"~5.4.0\",\r\n    \"ts-node\": \"~8.1.0\",\r\n    \"tslint\": \"~5.16.0\",\r\n    \"typescript\": \"~3.1.6\"\r\n  },\r\n  \"description\": \"An Ionic project\"\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
Sli\u010dan blog post, pod naslovom “Ionic 2 \u2013 proslje\u0111ivanje parametara izme\u0111u stranica“, sam ve\u0107 objavio, ali vrijeme je za novi jer Ionic 4 vi\u0161e ne radi isklju\u010divo na dosada\u0161nji pop\/push na\u010din, nego koristi Angular Router, pod uvjetom da se koristi i Angular Framework u pozadini. Kreiranje projekta Novi Ionic 4 projekt kreiram ve\u0107 dobro poznatom … Nastavi \u010ditati Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":10155,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[564,351],"tags":[596,595,529,348],"class_list":["post-10152","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-razvoj","tag-angular-7","tag-angular-router","tag-ionic-4","tag-ionic-framework"],"yoast_head":"\nIonic 4 & Angular Router \u2013 proslje\u0111ivanje parametara - Tomislav Stankovi\u0107<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/\" \/>\n<meta property=\"og:locale\" content=\"hr_HR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara - Tomislav Stankovi\u0107\" \/>\n<meta property=\"og:description\" content=\"Sli\u010dan blog post, pod naslovom “Ionic 2 \u2013 proslje\u0111ivanje parametara izme\u0111u stranica“, sam ve\u0107 objavio, ali vrijeme je za novi jer Ionic 4 vi\u0161e ne radi isklju\u010divo na dosada\u0161nji pop\/push na\u010din, nego koristi Angular Router, pod uvjetom da se koristi i Angular Framework u pozadini. Kreiranje projekta Novi Ionic 4 projekt kreiram ve\u0107 dobro poznatom … Nastavi \u010ditati Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/\" \/>\n<meta property=\"og:site_name\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta property=\"article:published_time\" content=\"2019-05-27T18:13:37+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-05-29T20:02:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/05\/ionic4-angular-router-min.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"510\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Tomislav Stankovi\u0107\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Napisao\/la\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tomislav Stankovi\u0107\" \/>\n\t<meta name=\"twitter:label2\" content=\"Procijenjeno vrijeme \u010ditanja\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/\"},\"author\":{\"name\":\"Tomislav Stankovi\u0107\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"headline\":\"Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara\",\"datePublished\":\"2019-05-27T18:13:37+00:00\",\"dateModified\":\"2019-05-29T20:02:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/\"},\"wordCount\":410,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/ionic4-angular-router-min.png\",\"keywords\":[\"Angular 7\",\"Angular Router\",\"Ionic 4\",\"Ionic Framework\"],\"articleSection\":[\"Mobile\",\"Razvoj\"],\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/\",\"name\":\"Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara - Tomislav Stankovi\u0107\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/ionic4-angular-router-min.png\",\"datePublished\":\"2019-05-27T18:13:37+00:00\",\"dateModified\":\"2019-05-29T20:02:51+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/#breadcrumb\"},\"inLanguage\":\"hr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/ionic4-angular-router-min.png\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/05\\\/ionic4-angular-router-min.png\",\"width\":825,\"height\":510,\"caption\":\"Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/ionic-4-angular-router\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Po\u010detna stranica\",\"item\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"name\":\"Tomislav Stankovi\u0107\",\"description\":\"Sam svoj bloger\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"hr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/#\\\/schema\\\/person\\\/0329c549c57700034ea77f5d3d78396d\",\"name\":\"Tomislav Stankovi\u0107\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"hr\",\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"contentUrl\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\",\"width\":248,\"height\":165,\"caption\":\"Tomislav Stankovi\u0107\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/cropped-TomislavStankovic.jpg\"},\"description\":\"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.\",\"sameAs\":[\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/tomislavstankovic\\\/\"],\"url\":\"https:\\\/\\\/www.tomislavstankovic.com\\\/blog\\\/author\\\/tomislavstankovic\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara - Tomislav Stankovi\u0107","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/","og_locale":"hr_HR","og_type":"article","og_title":"Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara - Tomislav Stankovi\u0107","og_description":"Sli\u010dan blog post, pod naslovom “Ionic 2 \u2013 proslje\u0111ivanje parametara izme\u0111u stranica“, sam ve\u0107 objavio, ali vrijeme je za novi jer Ionic 4 vi\u0161e ne radi isklju\u010divo na dosada\u0161nji pop\/push na\u010din, nego koristi Angular Router, pod uvjetom da se koristi i Angular Framework u pozadini. Kreiranje projekta Novi Ionic 4 projekt kreiram ve\u0107 dobro poznatom … Nastavi \u010ditati Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara","og_url":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/","og_site_name":"Tomislav Stankovi\u0107","article_published_time":"2019-05-27T18:13:37+00:00","article_modified_time":"2019-05-29T20:02:51+00:00","og_image":[{"width":825,"height":510,"url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/05\/ionic4-angular-router-min.png","type":"image\/png"}],"author":"Tomislav Stankovi\u0107","twitter_card":"summary_large_image","twitter_misc":{"Napisao\/la":"Tomislav Stankovi\u0107","Procijenjeno vrijeme \u010ditanja":"4 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/#article","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/"},"author":{"name":"Tomislav Stankovi\u0107","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"headline":"Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara","datePublished":"2019-05-27T18:13:37+00:00","dateModified":"2019-05-29T20:02:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/"},"wordCount":410,"commentCount":0,"publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/05\/ionic4-angular-router-min.png","keywords":["Angular 7","Angular Router","Ionic 4","Ionic Framework"],"articleSection":["Mobile","Razvoj"],"inLanguage":"hr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/","url":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/","name":"Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara - Tomislav Stankovi\u0107","isPartOf":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/#primaryimage"},"image":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/#primaryimage"},"thumbnailUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/05\/ionic4-angular-router-min.png","datePublished":"2019-05-27T18:13:37+00:00","dateModified":"2019-05-29T20:02:51+00:00","breadcrumb":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/#breadcrumb"},"inLanguage":"hr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/"]}]},{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/#primaryimage","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/05\/ionic4-angular-router-min.png","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/05\/ionic4-angular-router-min.png","width":825,"height":510,"caption":"Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara"},{"@type":"BreadcrumbList","@id":"https:\/\/www.tomislavstankovic.com\/blog\/ionic-4-angular-router\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Po\u010detna stranica","item":"https:\/\/www.tomislavstankovic.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ionic 4 & Angular Router \u2013 proslje\u0111ivanje parametara"}]},{"@type":"WebSite","@id":"https:\/\/www.tomislavstankovic.com\/blog\/#website","url":"https:\/\/www.tomislavstankovic.com\/blog\/","name":"Tomislav Stankovi\u0107","description":"Sam svoj bloger","publisher":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.tomislavstankovic.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"hr"},{"@type":["Person","Organization"],"@id":"https:\/\/www.tomislavstankovic.com\/blog\/#\/schema\/person\/0329c549c57700034ea77f5d3d78396d","name":"Tomislav Stankovi\u0107","image":{"@type":"ImageObject","inLanguage":"hr","@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","url":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","contentUrl":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg","width":248,"height":165,"caption":"Tomislav Stankovi\u0107"},"logo":{"@id":"https:\/\/www.tomislavstankovic.com\/blog\/wp-content\/uploads\/2019\/10\/cropped-TomislavStankovic.jpg"},"description":"Bloger \u0161irokog raspona interesa od kojih dio voli objaviti na ovom blogu. U neslobodno vrijeme Angular developer mobilnih i web aplikacija.","sameAs":["https:\/\/www.tomislavstankovic.com\/blog\/","https:\/\/www.linkedin.com\/in\/tomislavstankovic\/"],"url":"https:\/\/www.tomislavstankovic.com\/blog\/author\/tomislavstankovic\/"}]}},"_links":{"self":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/10152","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/comments?post=10152"}],"version-history":[{"count":51,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/10152\/revisions"}],"predecessor-version":[{"id":10213,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/posts\/10152\/revisions\/10213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media\/10155"}],"wp:attachment":[{"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/media?parent=10152"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/categories?post=10152"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tomislavstankovic.com\/blog\/wp-json\/wp\/v2\/tags?post=10152"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}