Access Param in URL in component/page

Ionic Framework ionic-v3
1

Using IonicPage, I can do this:

pushPage(detailInfo) {
    // Push an `token` to the `'reset-password'`
    this.navCtrl.push('reset-password', {
      'token': detailInfo.token
    })
  }

which will get me a url like this: myurl:8100/#/reset-password/abcd where the abcd is the token pushed.

My question is, can I do this:
Enter this url in the browser directly,
myurl:8100/#/reset-password/uvwxyz

and be able to access a :token which contains the uvwxyz string?

Going through the IonicPage docs, I read of dynamically forming URL segments. I wanna know if I can get a reverse of that - from URL into page.

If that ain’t possible, I’ll drop to plain old javascript to grab URL segment.

2

Ugly, but works:

if location is this:

localhost:8100/#/reset-password/abcd

let token = location.href.split('#')[1].split('/')[2];
console.log(token); // 'abcd'
3

The (much cleaner) option with IonicPage's segment property seems to work as one would expect.

4

Will appreciate a how-to as I’m confused about how to do such a thing with the IonicPage. Couldn’t find any example of that sort in the docs.

5

My sandbox project uses the tabs template. I made the about page lazy for testing lazy loading things, so I made it look like this:

@IonicPage({
  name: 'AboutPage',
  segment: 'about/:param'
})
@Component({
  selector: 'page-about',
  templateUrl: 'about.html'
})
export class AboutPage {
  param: string;

  constructor(public navCtrl: NavController, np: NavParams) {
    this.param = np.get('param');
  }
}

The typical URL when I click the About tab looks like so:

localhost:8102/#/tabs/t0/about/about/:param

I put a {{param}} inside of the template for testing. If I replace the :param in the URL with foo and refresh the browser, I see foo in the template, so it is getting through via the IonicPage deeplink system.

3 Likes
6

Thanks. That looks cleaner!