Angular 6 Routing - Query Parameters inside named secondary router outlet

Question

In angular 6, is it possible to use query parameters within a secondary named router outlet. An example URL of the type I am looking for is

localhost:4200/home(sidebar:chat?animal=dog)

I am looking to be able to set the query parameter: animal and also be able to access its value within the component.

So far I have tried in the template

[routerLink]="gridRouterLink" [queryParams]="queryParams" 

where gridRouterLink = ["", {outlets: {sidebar: "chat"}}]

and queryParams = { animal: "dog"}

but i get something like localhost:4200/home(sidebar:chat)?animal=dog

Answer 1

Currently using Angular 8 and I was able to achieve this only using router from the controller.

Template:

<button (click)="testOutletModal($event)">Test</button> 

Controller:

testOutletModal($event: MouseEvent) {
  $event.preventDefault();

  const navigationExtras = { queryParams: { test: 1, project: 1 } };
  const commands = [
    {
      outlets: {
        modal: ['one', 'two', 3],
      },
    },
  ];
  this.router.navigate(commands, navigationExtras);
}

then my url looks like http://localhost:4200/(modal:one/two/3)?test=1&project=1. At first glance it is wrong query params are outside of () where outlet routing information is located. However, URL can have only one ?, hence one params "array".

I tried to access queryParams from the controller that is configured for the route 'modal:one/two/3' and it works.

this.route.queryParams.subscribe(qp => {
  console.log('Query Params', qp);
})
// Query Params {test: "1", project: "1"}

It seems this is the correct way to achieve this.

Answer 2

You can use the parameter in routing as follows:

const routes:Routes = [
 { path: '/:id', component: ProfileComponent, name: 'Details'}
]

To get parameter in your component

class ProfileComponent{
token: string;
constructor(params: RouteParams) {
  this.token = params.get('id');
}
}

hope this will help you.