Angular 4 Route fails if added parameter with hyphen

I am using Angular 4 and if I use hyphen between parameters instead of slash, the route does not work as expected. Here is my route:

{ path: ':bookId/:pageFrom-:pageTo', component: BookComponent }

I was expecting to receive the values of pageFrom and pageTo in separate params but I am receiving it in pageFrom-:pageTo. I have also tried to escape the hyphen with \ but that also does not work.

[zishanj]

I have other ideas also to implement it like splitting the string later by hyphen… But I am looking for something more genuine like this { path: ':bookId/:pageFrom-:pageTo', component: BookComponent } which will allow the use of hyphen - as separator instead of /

This is also useful for my visitors to use shortest/simple possible link instead of providing custom query parameters.

[okYadav]

Use following code this.

{ path: ':bookId', component: BookComponent }

In your component do

constructor(private _activatedRoute: ActivatedRoute) {
    this._activatedRoute.params.subscribe(v => {
            // You can get param here v['pageFrom'];
            // You can get param here v['pageTo'];
    });
}