Add query params to current route Angular2/4

Question

I have a parent component on the route '/parent', it has a links e.g.

<a routerLink="./" [queryParams]="{query: value}">

I have a component in the nested route '/parent/child', that listens for query params change. The problem is that parent component generates links without child route e.g. "/parent?query=value". Is there any way to only add query params to current route from parent component?

{
  path: 'route/:value/:value_two',
  component: component,
  canActivate: [GuardService],
  children: [{
      path: '',
      component: commonComponent
    }, {
      path: 'child1',
      component: childOneComponent
    }, {
      path: 'child2',
      component: childTwoComponent
  }]
}

@PranayRana in my parent component i have a link like I've shown in example, and when child route is loaded I want get url with query params by clicking that link, but it generates link without child route like parent?query, I want to get parent/child?query, or parent?query if no child loaded — Alexander Bondarenko
@PranayRana it just removes current route and gives me parent route — Alexander Bondarenko

Pranay Rana Pranay Rana · Accepted Answer · 2017-12-19T13:22:05

this is working for me

route

{ path: 'component-two', component: ChildOne,
    children: [
      { path: '', redirectTo: 'child-one', pathMatch: 'full' },
      { path: 'child-one', component: ChildOne },
      { path: 'child-two', component: ChildTwo }
    ]
  }

route link

<a [routerLink]="['/component-two/child-two']" [queryParams]="{ page: 99 }">Component Two</a>

in ts file

 private ngOnInit() {
     this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.id = +params['page'] || 0;
      });
  }

in parent component you can do like this

<nav>
  <a [routerLink]="['./child-one']">Child One</a>
  <a [routerLink]="['./child-two']">Child Two</a>
</nav>

Add query params to current route Angular2/4

2 Answers