Angular Routing param in the middle

Question

On my routing module I've a path with some id in the middle. Something like

 {
    path: 'detail/:id/new',
    component: SomeComponent
 }

In order to have a link to it, I manage two solutions to call it.

Solution 1:

this.router.navigate(['detail/:id/new', { id: this.myId }]);

Generated URL: http://localhost:4200/myApp/detail/:id/new;id=10

Solution 2:

this.router.navigate(['detail/' + this.myId +'/new']);

Generated URL: http://localhost:4200/myApp/detail/10/new

For me, the second solution/URL is more standard and cleaner, but the way to accomplish it seems kind of "hard-coded".

There are some other way to accomplish the solution 2? There are any angular standard?

Answer 1

I believe the option that would be least "hard-coded" will look like this:

this.router.navigate(['detail' , this.myId, 'new']);