Angular 4 : Click On A Link With Parameters

I am quite new to Angular 4. I have an anchor tag which upon clicking it should redirect me to a link where I need to pass parameters as well. I am not sure if my approach is right

Solution 1:

IMHO, you should use Angular router to navigate like this:

myFunc() {
  console.log("function called");
  this.router.navigate(['../myURL'], {queryParams:{rurl: "someId"}})
 }

Also, don't forget to import Router like this:

import {Router} from'@angular/router';

this.router = Router;              

NOTE: using ../ before an URL makes router go up by one level.

Solution 2:

If You you want to redirect outside of application:

myFunc(){
   window.location.href = `full_url?rurl=${encodeURIComponent(display)})`;
}

If You you want to navigate to page inside of your application:

myFunc(){
this.router.navigate(['/navigation_route'], {queryParams:{returnRoute: 'any_path'});
}

Solution 3:

Using [routerLink] :

<a [routerLink]="['/route-name', id]"href="">Go to mymodule</a>

also you shouldn't forget to change routing config like :

[path: 'route-name/:id', component:ComponentName, pathMatch: 'full']

Using navigateByUrl :

import { Router } from'@angular/router';

constructor(private router: Router) { }

myFunc = function () {
        this.router.navigateByUrl('/route-name', {queryParams:{param-key: param-value}});
};