How to pass object from routerLink in angular 7

Question

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

Pass the unique identifier of the person, and get the details of this person thanks to this unique identifier. Just like, when you click on your question in the home page of StackOverflow, you get to a page with the URL https://stackoverflow.com/questions/57567816. See angular.io/tutorial/toh-pt5#add-a-hero-detail-route and angular.io/tutorial/toh-pt5#routable-herodetailcomponent — JB Nizet
– JB Nizet, Commented Aug 20, 2019 at 6:43
from Angular 8 you can pass an object in state, see, e.g. netbasal.com/… — Eliseo
– Eliseo, Commented Aug 20, 2019 at 6:57

Navruzbek Noraliev · Accepted Answer · 2019-08-20 06:56:20Z

4

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!

answered Aug 20, 2019 at 6:56

Navruzbek Noraliev

7146 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mario Boss · Accepted Answer · 2020-04-04 23:28:45Z

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>

Collectives™ on Stack Overflow

How to pass object from routerLink in angular 7

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related