Angular route with multiple parameters

Question

I have a page that will be open by another application with parameterized URL.

Ex: sitename.com/language/myapplication?param1=xxx&param2=xxx

In my component .ts I have:

this.param1= this.route.snapshot.queryParamMap.get('param1');
this.param1= this.route.snapshot.queryParamMap.get('param2');

this.router.navigate(['/myapplication'],
  {
    queryParams: {
      param1: this.param1, param2: this.param1
    }
  });

I am using routing module as well:

const routes: Routes = [
  { path: '', redirectTo: '/myapplication', pathMatch: 'full' },
  { path: 'myapplication', component: myComponent },
  { path: '**', component: PageNotFoundComponent }
];

When I open the URL directly with the parameters it works fine.

Problem 1:

I have multi language on it, i18n, so when I change language via dropdown, the parameters disappear and it redirects to mysite.com/language/myapplication but I need something like sitename.com/fr/myapplication?param1=xxx&param2=xxx

Problem 2:

I want to force "page not found" in every scenario except when I have the URL with the parameters

Problem 3:

How can I transform those parameters from optional to required?

You can use AuthGaurd and the check there if Your URL has a parameter or not. ? — Rupesh
– Rupesh, Commented Jun 6, 2020 at 11:53
I will have an integration with Azure AD, maybe I can do it using it, I am not sure — Fabio Cardoso
– Fabio Cardoso, Commented Jun 6, 2020 at 11:56
I don't know about azure AD, but using AuthGuard you can check that. — Rupesh
– Rupesh, Commented Jun 6, 2020 at 11:57
Hi @FabioCardoso. Did you find a solution for this problem? I need the same than you and I don't know how to do it — beanic
– beanic, Commented Jan 28, 2021 at 16:51

Shalom Peles · Accepted Answer · 2020-06-07 10:55:57Z

3

Use route parameter instead of query string.

In the routing module:

const routes: Routes = [
  { path: '', redirectTo: '/myapplication', pathMatch: 'full' },
  { path: 'myapplication/:param1/:param2', component: myComponent },
  { path: '**', component: PageNotFoundComponent }
];

And in my-component.ts

this.param1= this.route.snapshot.paramMap.get('param1');
this.param2= this.route.snapshot.paramMap.get('param2');

If you need transform those parameters to optional add these lines to the routing module:

{ path: 'myapplication/:param1/:param2', component: myComponent },
{ path: 'myapplication/:param1', component: myComponent },
{ path: 'myapplication', component: myComponent },

answered Jun 7, 2020 at 10:55

Shalom Peles

2,63212 silver badges28 bronze badges

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

4 Comments

Fabio Cardoso Over a year ago

the url will be sitename.com/myapplication?param1=xxx&param2=xxx? because I tried this but I got the not found page

Fabio Cardoso Over a year ago

after debugging de snapshot object, queryParams have values but params is empty

Shalom Peles Over a year ago

The URL will be sitename.com/myapplication/xxx/xxx.

Fabio Cardoso Over a year ago

that is not the purpose. I need the name of the parameters. It is a requirement by the CI that will open the page.

HTN · Accepted Answer · 2020-06-06 13:33:36Z

1

Problem 1: It's not the job of angular router. You need to reload the browser with the right url for the language, do not use router for that, something like: location.assign(location.href.replace('/fr', '/en-US'));

Problem 2: A guard, but I prefer handling this directly in the component because you can use the same treatment for scenario without parameters, or parameter's value is not valid (e.g: user not found)

Problem 3: Same as problem 2. There is no such thing such as required parameter with angular router

answered Jun 6, 2020 at 13:33

HTN

3,6121 gold badge10 silver badges18 bronze badges

8 Comments

Fabio Cardoso Over a year ago

I'm not using router for language... i18n works like that, I just have to register locale data in app.module add it to provider and it works like a charm. The problem is when I have parameters in the URL. If I don't have parameters I don't need to replace anything to get the language to work.

Fabio Cardoso Over a year ago

for problem 2, my routing module is working without guard if I don't use parameters... path: '**', component: PageNotFoundComponent does the job

HTN Over a year ago

You means you can change the language dynamically without reloading? You are not using AOT?

Fabio Cardoso Over a year ago

No, sorry, the page is reloading. For multi language I am using the basic implemention of i18n. angular.io/guide/i18n

HTN Over a year ago

How do you do the switching language with the dropdown? I don't see why you can't keep the parameters

|

Collectives™ on Stack Overflow

Angular route with multiple parameters

2 Answers 2

4 Comments

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related