Get single value from url

Ionic Framework ionic-v3
1

I am working with an app in a browser and would like to retrieve a single value from the url.
eg:
somedomain.ca/#/id

In my app.module I have:

IonicModule.forRoot(MyApp, {}, {
     links: [
      { component: HomePage, name: 'Home', segment: ':id' },
    ]
  }

That works but when I navigate to to a different page, the url turns to somedomain.com/#/

Is there a way to retain the original URL by either:

  1. working with what I have now
  2. using a different way to extract the value from the url without using any linking
2

This is a confusing question. When you navigate to a different page, the URL is naturally going to change, so there isn’t really anything to “retain”. You would either have to duplicate what you are doing with segment on the other pages or pass the information via alternative means, such as NavParams or a shared service.

3

Hey there, I’ll try and make it less confusing.

When I use ‘links:’ as I showed in my example, I am able to get the ‘id’ value from the url and use it within the app but the url changes with different pages loaded - as you mentioned it would.
I do not need the ‘id’ value in any other pages, only on initial load.

I would like to Not use ‘links’ in my app.module because if I do not, the url never changes - but I cannot get the id: value from the url ( in an Ionic way).

However…
I can use window.location.href to get the initial id value in my app.components.ts.
I will then need to either pass the value through to the rootPage ( which I do not know how to do yet ) or use Events or the following ( which actually works and I will use it if nothing else ):

getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
      results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
  }

App["initial_value"] = this.getParameterByName("id", window.location.href);

I then use App[“initial_id”] in the first loaded page and the url never changes when I load subsequent pages.
This seems like a bit of a hack and thought there might be a more Ionic way to do this.

4

Don’t try to parse URLs with regexps. They are way too brittle and prone to edge cases.

You say you have the id parameter using the deeplinker segment. Presumably that is coming into the HomePage via NavParams. I am suggesting doing one of two things to convey this to other pages:

Use NavParams

class HomePage {
  id: string;
  constructor(np: NavParams, private _nav: NavController) {
    this.id = np.get('id');
  }

  goSomewhere(): void {
    this._nav.push(SomewherePage, {id: this.id});
  }
}

Shared service

class IdHolder {
  id: string;
}

class HomePage {
  constructor(np: NavParams, private _nav: NavController, idh: IdHolder) {
    idh.id = np.get('id');
  }

  goSomewhere(): void {
    this._nav.push(SomewherePage);
  }
}

class SomewherePage {
  constructor(public idh: IdHolder) {
  }
}

<div>{{idh.id}}</div>
5

This is what I was using.

IonicModule.forRoot(MyApp, {}, {
     links: [
      { component: HomePage, name: 'Home', segment: ':id' },
    ]
  }),

But when doing so, any subsequent page calls change the url.
I am not trying to pass the id to other pages - only stop the url from changing.
So, if your example is not changing the URL, I am missing it.

> Don’t try to parse URLs with regexps. They are way too brittle and prone to edge cases.

Well, I could just do a split on the ? in the url.

6

Why do you care about the URL changing? I assumed it was because you were losing the id information, but if that’s not it, I don’t understand.

7

It is for visual reasons.
A link is provided to a user to go to a SPA and the url contains the ‘name’ of the specific category they are entering.
Consistency in the url is just a desire.

So to answer your question ’ Why do you care about the URL changing?’ - because someone else does.

I have not tried it yet but I’ll likely go with the split on the url, unless you have any ideas of how to bring in a URL parameter without using segments and thus altering the url itself.

8

OK, whatever. Good luck.

9

Grey area huh.
Thanks for the help.