Hiding/trimming a part of the original route and redirecting to it

Question

Im working on angular 4 and i want to trim a part of my current slug and resolve it into the same component as the original slug such that the user cannot see the original slug in the params.

I have a route route/:slug which resolves into and object and renders the component with that object called EventDetail.component.

My question is, is it possible to trim a part of that slug so that my route/this-is-the-slug-by-person becomes route/this-is-the-slug, and it resolves into the same component: EventDetail.component

this is my route which resolves into the event

{
    path: 'route/:slug',
    component : EventDetailComponent,
    resolve: {
        event: resolverService 
    }
}

i want a route

{
    path:'route2/:trimmedSlug,
    component : EventDetailComponent,
    resolve: {
      ...
    }
}

my resolveService

resolve () {
   return this.service.getEvent(this.route.params['slug']);
}

Is there any elegant way to do this? Thankyou.

Answer 1

Use Location.replaceState.

constructor(public location: Location) {
  this.activatedRoute.paramMap.subscribe(paramMap => {
    const slug = paramMap.get('slug');
    const trimmed = ...;
    this.location.replaceState(trimmed);
  })
}

Make sure to import Location from @angular/common;