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"

Causey

What if you spread the array: orderid, ...arrayofints, anotherint? Ah, no: Parser Error: Unexpected token . at column – Paten

@Paten Negative, Parser Error: Unexpected token . at column 36 – Causey

what if you join the arrayofints? – Aye

Yeah I tried it on Plunker. Then just build the array in the component, where you can spread the sub-array, and bind the whole thing. – Paten

I've tried replacing arrayofints with "1/2/3" but it ends up escaping the "/" – Causey

The problem with that is the last part of the url added in an ngfor from a list of things. – Causey

Then make a function that returns the array - [routerLink]="createRouteWith(thing)". My point is that you aren't so limited in what syntax you can use within the component code. – Paten

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

So basically it is flattening of list that we have to do first. – Jampacked

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.

Paten

I think the returned type should be an intersection instead of a union. Typescript Advanced Typeslink: >A union type describes a value that can be one of several types. We use the vertical bar (|) to separate each type, so number | string | boolean is the type of a value that can be a number, a string, or a boolean. Clearly this array will always be a string & number and not either one of them. – Participation

@A.Alencar the things in the array are either strings or numbers, you can't treat them as both simultaneously as string & number would imply. See typescriptlang.org/docs/handbook/advanced-types.html. – Paten

I see. Thanks for clarifying! I thought the returned array was of string AND numbers but the thing is that the each value is defined as number OR string so the array is also of type number OR string. – Participation

Answer 2

Flattening the arguments will give you the right URL

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

Jampacked