title: How to pass additional route parameter in angular?
body: <p>I am working on Angular 6 application and have route survey that is config on app root level and then :id to take it survey detail page, I am trying to navigate from component using </p>
  
  <pre><code> this.router.navigate(['/survey'], this.listedSurvey.surveyIdNum);
  </code></pre>
  
  <p>But I believe I am missing something from router navigate as I am unable to do so.</p>
  
  <h2>App route</h2>
  
  <pre><code>const routes: Routes = [
  { path:'welcome', component:WelcomeComponent },
  { path:'', redirectTo: 'welcome', pathMatch:'full'},
  { path:'survey', loadChildren: '../survey/survey.module#SurveyModule' },
  { path:'**', component:PageNotFoundComponent}
  ];
  
  @NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [
   RouterModule
   ]
   })
  
   export class AppRoutingModule { }
  </code></pre>
  
  <h2>survey module</h2>
  
  <pre><code>const routes: Routes = [
  { 
      path:'', 
      component:SurveyComponent,
  },
  {
      path:':id',
      component: SurveyFormComponent
   }
  ];
  
  @NgModule({
   imports:[
       RouterModule.forChild(routes)
   ],
   exports:[]
  })
   export class SurveyRouting{
  }
  </code></pre>
  
  <h2>component</h2>
  
  <pre><code> private handleSelectedSurvey(dataItem:any){
     this.listedSurvey = dataItem;
     const a:number = 2;
     //this.router.navigate(['/survey'], this.listedSurvey.surveyIdNum);
     this.router.navigate(['/survey'],{queryParams:{id:a}}); 
   }
  </code></pre>