7

I am new to ionic 2. After a searching everywhere I can not find a direct answer given the following scenario:

  1. I am building a PWA with ionic 2 (because I will later develop hybrid versions of this app)
  2. the address where users will find and access my app will be a standard domain like https://welcometotheapp.com?viewid=0101018737abcdefg
  3. I am using ionic 2, recently installed on windows 10
  4. I have started a new blank app project
  5. My question is NOT related to navigation.

My question is how do I go about accessing the url parameter viewid? I need this parameter so that the app send it to my server side REST api and get the right json data. My users receive the url with the parameter as a link by SMS. I have tried to make use of several suggestions like this question

But I'm spinning my wheels. I've also watched quite a number of youtube vids from Josh Morony and others but again nothing directly related.

Can someone help with this question? As a newbie, it would be very helpful if code snips were annotated with what code goes in what file given the ionic2 blank template structure. Thanks peeps!

Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
detourOfReason
  • 325
  • 1
  • 3
  • 11

2 Answers2

3

You could try plain old javascript. I dont think this is anything specific to ionic. And because it is not primarily navigation based then the NavParams would not work, i am guessing.

In .js you can do a split like so

let myParam = location.search.split('viewid=')[1];

Note that if there is no viewId= then the variable will be undefined. Here are the docs for location.search

  • Thanks, I have succeesfully used javascript for this kind of thing before. So as far as structure, if I created a .js file, like "readurl.js", where would I place it in the application file tree and how would I reference/call it? Reading the parameter from the url is the 1st thing the app needs to do after loading. The json data will be displayed on home.html. – detourOfReason Mar 06 '17 at 19:52
  • I would suggest adding it to the `app.component.ts` in the constructor. Or depending how you are going to manipulate the data the `home.ts` in the constructor or the `ionViewDidLoad()` function –  Mar 07 '17 at 11:29
  • thanks for your help. in my case I ended up adding it to my home.ts in the ionViewDidLoad() function because I only want to retrieve the parameter(s) the on the initial load. It is my understanding from the documentation that if placed in the constructor, it would run every time the page loads. In my case, this is undesirable. Again, many thanks! – detourOfReason Mar 12 '17 at 03:07
  • @gerdi if the url is in the form https://welcometotheapp.com/astringgoeshere/?key1=value&key2=value2 and I want to read url after .com/. will it work? or any other way? – Vivek Sinha May 24 '17 at 09:37
1

I had to use Location from @angular/common. So I believe is worth post another answer:

import { Location } from '@angular/common';

...

public urlParams: any;

constructor(..., public location: Location) {
    this.initializeURLParams();
    console.log(this.urlParams);
}

initializeURLParams() {
  const path = this.location.path(true),
    hasParams = /\?(.+?\=.+){1}/;
  let params;

  if (hasParams.test(path)) {
    params = {};
    path.split('?')[1].split('&').forEach(both => {
      let e = both.split('=');
      params[e[0]] = e[1];
    });
  }

  this.urlParams = params;
}
tuliomarchetto
  • 549
  • 1
  • 5
  • 14
  • This did not work for me, in the browser. This.location.path (true) returned "" . However I only tested it with ionic:serve, not sure what would happen in production. What worked though is this: location._platformStrategy._platformLocation.location.search; – Michael May 17 '18 at 19:32
  • 1
    Update, the above was when the path does not have # hash. When it does location.path works fine – Michael May 17 '18 at 19:47