Get url parameter

Ionic Framework ionic-v3
1

Hello,

is there an easy way to read the url params when I run my ionic app in the browser?

For example I want to link to my Browser app like this.

http://www.weeklystyle.de/?category=music&id=2

This shoud open the detail page of my music category showing the entry with the id 2

Any suggestions?

2

Ok. I found a soloution. I think it is not perfekt but it works.

First define an array

private urlParameters: Array<any> = [];

Then in IonViewDidLoad

if (document.URL.indexOf("?") > 0) {
	let splitURL = document.URL.split("?");
	let splitParams = splitURL[1].split("&");
	let i: any;
	for (i in splitParams){
		let singleURLParam = splitParams[i].split('=');
		if (singleURLParam[0] == "category"){
			this.category = singleURLParam[1];
		}
		if (singleURLParam[0] == "id"){
			this.id = singleURLParam[1];
		}
		let urlParameter = {
		'name': singleURLParam[0],
		'value': singleURLParam[1]
	};
	this.urlParameters.push(urlParameter);
	}
}

Switch wich page should load

switch (this.category){
case 'music':
	this.goToPageMusicURL();
	this.showToastWithCloseButton();
	break;
case 'events':
	this.goToPageEventsURL();
	this.showToastWithCloseButton();
	break;
}

Go to the page

goToPageMusicURL() {
	//push another page onto the history stack
	//causing the nav controller to animate the new page in
	this.navCtrl.push(MusicPage, this.urlParameters);
	this.menuCtrl.close();
}

   // For normal click Events

goToPageMusic() {
	//push another page onto the history stack
	//causing the nav controller to animate the new page in
	this.navCtrl.push(MusicPage);
	this.menuCtrl.close();
}

Get the Parameter at the target page

try{
	console.log(navParams);
	this.urlParamID = navParams.get('1').value;
}catch(ex){
	this.urlParamID = "";
}

Living excample:

http://ionic.weeklystyle.de/?category=music&id=3

Walks throug the site like the user clicks…

3

Ok. Since Ionic 3 is out I can do this with IonicPage

1 Like
4

Hi Can you elaborate how?

5

This is the code to extract the parameters from the url

if (document.URL.indexOf("?") > 0) {
	let splitURL = document.URL.split("?");
	let splitParams = splitURL[1].split("&");
	let i: any;
	for (i in splitParams){
		let singleURLParam = splitParams[i].split('=');
		if (singleURLParam[0] == "category"){
			this.category = singleURLParam[1];
		}
		if (singleURLParam[0] == "id"){
			this.id = singleURLParam[1];
		}
		let urlParameter = {
		'name': singleURLParam[0],
		'value': singleURLParam[1]
	};
	this.urlParameters.push(urlParameter);
	}
}
3 Likes
6

You said that you can do with @IonicPage. your above quote is a generic method to retrieve parameters isnt it?

7

Isnt deeplinking intended for all this?

Or even better: router?

So no need to fiddle with document.url

8

Found somethibg

9

Take a look at the dynamic link section of the page documentation.

But it works only with lazy loading.


@IonicPage({
  name: 'detail-page',
  segment: 'detail/:id'
})

In this example the path shoud be something like http://localhost:8100/detail-page/1234

Where 1234 is the parameter id

1 Like
10

In Ionic4 I think IonPage would be removed and you can use Angular’s router to doing this! GREAT

1 Like
11

That only seems to work for numbers/numerical strings

12

Why? If you urlencode and decode your string it should work. Why not?

13

Really helpful! Thanks for sharing!