• Using routerLink method: <a
  • [routerLink] = “[‘/sample’, 1, ‘test’]”
  • [quetyParams] = “{product: ‘apple’, amount: 5}”
  • [fragment] = “‘color'”> sample </a>
  • the output URL is: localhost:4200/sample/1/test?product=apple&amount=5#color
• Using router.navigate() method:
  • this.router.navigate([‘/sample’, 1, ‘test’], {queryParams: {product: ‘apple’, amount: 5}, fragment: ‘color’});
  • the output URL is: localhost:4200/sample/1/test?product=apple&amount=5#color

for navigate() method, several arguments need to know

this.route.navigate([‘address’], {queryParams:{key, value}, relateTo: this.route, queryParamsHandling: ‘preserve/merge’}) (for queryParamsHandling property: if you want to keep query string for this navigation, you need to use “preserve”, if you add some new query string in this navigation, you need to use “merge”