I am applying global navigation on one of my component page.

MyComponent

export class MyComponent implements OnInit {
  sampleId: number;
  ngOnInit() {
    try {
      this.route.queryParams.subscribe(params => {
        this.sampleId = params['sampleId'];
        this.router.navigate(["/samples"], { queryParams: { id: this.sampleId} });
      })
     }
   }
}

app-rounting.ts

const routes: Routes = [
  { path: 'samples', component: MyComponentViewComponent }]

View

<li class="style-cls" [routerLinkActive]="['link-active']">
  <a [routerLink]="['/samples']" [queryParams]="{id: this.sampleId }">Samples</a>
</li>

I am getting an error to display the navigation using anchor tag. In queryparams, how can I get the value of id which is assigned in component so that I can navigate.