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"

What if you spread the array: `orderid, ...arrayofints, anotherint`? Ah, no: `Parser Error: Unexpected token . at column` — jonrsharpe, Jul 13 '17 at 21:10
@jonrsharpe Negative, Parser Error: Unexpected token . at column 36 — Darthg8r, Jul 13 '17 at 21:14
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. — jonrsharpe, Jul 13 '17 at 21:16
I've tried replacing arrayofints with "1/2/3" but it ends up escaping the "/" — Darthg8r, Jul 13 '17 at 21:16
The problem with that is the last part of the url added in an ngfor from a list of things. — Darthg8r, Jul 13 '17 at 21:19
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. — jonrsharpe, Jul 13 '17 at 21:20
`[routerLink]="[].concat.apply([],['/customers', customerid, orderid, arrayofints, anotherint])"` — Rajan Chauhan, Jul 13 '17 at 21:26
So basically it is flattening of list that we have to do first. — Rajan Chauhan, Jul 13 '17 at 21:27

score 10 · Accepted Answer · answered Jul 13 '17 at 21:51

10

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.

answered Jul 13 '17 at 21:51

jonrsharpe

115,751
26
228
437

I think the returned type should be an intersection instead of a union. Typescript Advanced Types[link](https://www.typescriptlang.org/docs/handbook/advanced-types.html): >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. – A. Alencar Oct 17 '18 at 16:51
1

@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 https://www.typescriptlang.org/docs/handbook/advanced-types.html. – jonrsharpe Oct 17 '18 at 16:54
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. – A. Alencar Oct 17 '18 at 17:07

score 3 · Answer 2 · answered Jul 13 '17 at 21:48

3

Flattening the arguments will give you the right URL

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

answered Jul 13 '17 at 21:48

Rajan Chauhan

1,378
1
13
32

RouterLink Array

2 Answers2