Extracting optional parameter value from url on angular2

Question

I am redirecting to my Angular2 site with some (optional) appended parameters like so:

https://my-site.com/?param1=some-value1&param2=some-value2

So i want to extract the values into variables if they exist:

let value1 = extractValueByParam(url, param1Str);

Can it be done with router variables? Or what is the "correct" way of doing this?

So far the best method I have found is to use window.location.href value and parse it myself, but it does not seem like the right thing to do.

Thanks!

slaesh · Accepted Answer · 2017-02-16 11:14:09Z

1

You should use queryParams:

constructor (private _ar: ActivatedRoute) {}

ngOnInit() {
   this._ar.params.subscribe(params => console.log(params)); // params used with '/'
   this._ar.queryParams.subscribe(params => console.log(params)); // optional params used with '?'/'&'
}

official docs:

answered Feb 16, 2017 at 11:14

slaesh

17k6 gold badges53 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ronenmiller Over a year ago

Exactly what I was looking for! Thanks!

ronenmiller Over a year ago

One more thing, I see that the percentage signs (%) are being replaced with '/' in queryParams , how do I keep these percentage signs as i need to carry them forward for the BE

slaesh Over a year ago

which percentage signs? don't know the internal logic, maybe its a bug within angular..

ronenmiller Over a year ago

Just so this does not confuse anyone, I was wrong by looking at string value vs UUID value.

ZanattMan · Accepted Answer · 2017-02-16 10:02:05Z

0

In your ngModules set the rout as:

{path: '/:param1/:param2', component: YourComponent}

Then in your component, get the value with the following:

 if(params['param1']){
    var param1 = params['param1'];
 }

answered Feb 16, 2017 at 10:02

ZanattMan

7361 gold badge9 silver badges26 bronze badges

2 Comments

ronenmiller Over a year ago

But my url is not of this form, how would this match? to be specific, I do not have '/' between params.

ronenmiller Over a year ago

Also getting this error: Unhandled Promise rejection: Invalid configuration of route '/:token': path cannot start with a slash ;

Collectives™ on Stack Overflow

Extracting optional parameter value from url on angular2

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related