RouterLink Array

Question

I've got a hyper link that I need to make a routerlink in Angular 4. I have a lot of parts to the url, part of which is an array. I'm not sure how to make the array split itself into parts for the routerlink array.

Take this contrived example:

[routerLink]="['/customers', customerid, orderid, arrayofints, anotherint]"

I'd like the router to look like this where customerid = 10, order = 500, arrayofints = [1,2,3], anotherint = 888

"/customers/10/500/1/2/3/888"

I end up with something like this instead:

"/customers/10/500;0=1;1=2;2=3/888"

Answer 1

For anything non-trivial, I'd do the work in the component code rather than the template. So in the template:

[routerLink]="customerRouteFor(anotherint)"

and in the component, where you can use the ...spread syntax:

customerRouteFor(anotherint: number): (string | number)[] {
  return ['/customers', this.customerid, this.orderid, ...this.arrayofints, anotherint];
}

This seems rather cleaner than the concat approach, in my view.

Answer 2

Flattening the arguments will give you the right URL

[routerLink]="[].concat.apply([],['/customers', customerid, orderid, arrayofints, anotherint])"