Pass values to route

Question

I have a list of items. When the user clicks on an item, the user will be taken to item details page.

I want to pass an object containing item details(like item's image URL) to the route. However, I don't want to expose it in the routes url.

If there were a way to do something like <a route-href="route: details; settings.bind({url: item.url})">${item.name}</a> that would be gold.

I have seen properties can be passed to a route if defined in the route configuration. However, I don't know how to change that from the template. Another way could be is to define a singleton and store the values there and inject the object to the destination route.

Is there a way to pass values to routes from view (like angular ui-routers param object)?

Answer 1

For those @Sayem's answer didn't worked, you can put any additional data (even objects) into setting property like this:

let editEmployeeRoute = this.router.routes.find(x => x.name === 'employees/edit');
editEmployeeRoute.settings.editObject = employeeToEdit;
this.router.navigateToRoute('employees/edit', {id: employeeToEdit.id});

So editObject will be delivered on the other side:

activate(params, routeConfig, navigationInstruction) {
    console.log(params, routeConfig, navigationInstruction);
    this.editId = params.id;
    this.editObject = routeConfig.settings.editObject;
}

hopes this helps others encountering same problem as me. TG.

Answer 2

Okay so I figured out a way to achieve something closer to what I wanted:

Objective: Pass data to route without exposing them in the location bar.

Let's say, we have a list of users and we want to pass the username to the user's profile page without defining it as a query parameter.

In the view-model, first inject Router and then add data to the destination router:

goToUser(username) {
    let userprofile = this.router.routes.find(x => x.name === 'userprofile');
    userprofile.name = username;
    this.router.navigateToRoute('userprofile');
}

Now when the route changes to userprofile, you can access the route settings as the second parameter of activate method:

activate(params, routeData) {
    console.log(routeData.name); //user name
}