Angular : pass optional data within route

Question

I'm using angular 5 , I ve a long routing file :

const homeRoutes: Routes = [
  {
    path: 'home', component: HomeComponent,
    children: [
      {
        path: 'registration',
        component: RegistrationComponent,
        children: [
          {
            path: 'synthese',
            component: SyntheseComponent
          },
          {
            path: 'queue',
            component: QueueComponent,
            children: [
              {
                path: 'queue-modal',
                component: QueueModalComponent
              },
              {
                path: 'confirm',
                component: ConfirmComponent
              }
            ]
          }
        ]
      },
      {
...

And i want to pass data within the "registration" path .

As i was told , i need to write it like this : path: 'registration/:mydata',

and after that subscribe to data of ActivatedRoute

The problem that i'm not always passing data , it s only in some cases.

How may i make it with minimum of impact ??

Answer 1

You can use querystring parameters (AKA queryParams) instead of route parameters. You do not need to define query params in the route.

Here is an example of a relative href:

registration/?mydata=123

This is how you can define queryParams for a routerLink:

<a [routerLink]="['registration']" [queryParams]="{ mydata: 123 }">Go to Registration</a>

This is how you can read that param value:

myValue: any;

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    this.myValue = params['mydata'];
  });
}