CODEWITHSUNDEEP
angular
madhu Goud
madhu Goud

Reputation: 127

How to pass object from routerLink in angular 7

on click of hyperlink am opening employee details in new tab 

<a [routerLink]="['/employee','details',{name:employee.empName}]" target="_blank" ></a>

in service am accessing that like below

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
     this.name = route.params.name;
}

by using above code am able to get employee name but i want to pass complete employee object. And data is appending to url https://localhost:4200/employee/details;name=xxxx, i dont want to append that in Url .

If i pass employee object by converting to string , am getting data in url but am getting "page can’t be found" because i have some links in that object

Upvotes: 1

Views: 1316

Answers (2)

Lia
Lia

Reputation: 21

I think you are mixing two different ways. Router resolver and router params.

If you are using a router resolver, you need proper configuration of route with resolve param, and your resolve method has to return a value. The data will be delivered to component by ActivatedRoute.data.

 /* route config */
 { path: 'routePath', component: someComponent, resolve: { person: PersonService } },

 /* resolve method in the PersonService */
 resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
     return this.personData;
 }

 /* get the person in component */
 this.activatedRoute.data.subscribe(data => {
       this.person = data.person;
 });

Route params are designed for simple values, not objects. If you prefer to use params, just pass the unique id in param (like the comments says), and then, get the details from server using the id.

/** route config **/
{ path: 'routePath/:personId', component: SomeComponent }

/** link in html template **/
<a [routerLink]="['/employee', 'details', personId]"></a>

Upvotes: 1

Navruzbek Noraliev
Navruzbek Noraliev

Reputation: 716

I think the thing you want is not possible with routerLink. The solution is to get the uuid of employee and append it to the link your link will be like: https://localhost:4200/employee/details/123456789 after that retrive user by uuid. This is the best solution for now!

Upvotes: 4

Related Questions