typescript angular2 template queryParams

Question

I am trying to build an Angular 2 app with routing. I have a link in my template that looks like this:

<a href="#" [routerLink]="['/Foo']" [queryParams]="{page:1+curr}">Next</a>

In my component class curr is defined as

curr: number = 0

I want the linked URL to be

/Foo?page=1 

instead it looks like the 1 and curr are being concatenated and the URL is

/Foo?page10 

Any ideas?

Answer 1

试试这个代码

<a href="#" [routerLink]="['/Foo']" [queryParams]="{page:'1'+curr}">Next</a>

Answer 2

The problem was that even though curr was declared curr: number = 0 it was later asigned to a variable returned via AJAX that happened to be a string

curr = data.current // current is a string

I expected this to be caught by the transpiler but I was not running a verstion of lint. Therefore when trying to add a string and a number the number coerced into a string and the result was concatenation.