angular - passing queryParams to active route before navigating to another route

Question

I have a clarity datagrid where clicking on a row will open the item by routing from /organization/overview to /organization/:id;

For UX reasons I would like to store the last clicked id as a queryParam before I navigate.

eg

1. user clicks item with id=1234
2. route gehts updated to /organization/overview?id=1234
3. Navigate to /organization/1234

The idea is that when the user clicks the browser back button, the last clicked item will be highlighted. I do know that this behaviour could be easily implemented otherwise but this approach is what I'm interested in. Below is the the openOrganization Method I have so far.

openOrganization(organization){
    this.router.navigate([], {
        queryParams: { oid: organization.id },
        relativeTo: this.activatedRoute
    });
    this.router.navigate(['/admin/organizations', organization.id]);
}

It does not work because the 2nd navigate call seems to interrupt or cancel the first on, before its finished.

Thanks!

Answer 1

You should subscribe to your Router and snapshot your current route when the navigation end.
for example:

lastUrl: string;
constructor(private _router: Router) {
  _router.events.filter(event => event instanceof NavigationEnd).subscribe(e => {
    this.lastUrl = e.url;
  });
}

And then, the lastUrl variable holds the route that you came from.
--- Edit
Same with params, if you have specific params on each url, you can instead of get the url of the last route, get any params that you pass through.