Angular中routerLink传参数字拼接而非相加问题排查

Hey there! Let's break down why your "Next" button is string-concatenating the user ID instead of doing proper numerical addition—this is a super common gotcha with template expressions and type handling in Angular.

Common Causes & Fixes #

1. Your userId is a string, not a number #

If your userId variable is stored as a string (e.g., coming from an API response, or initialized like userId = '1' instead of userId = 1), the + operator will perform string concatenation instead of numerical addition. For example, '1' + 1 becomes '11' instead of 2.

Fix: Convert the string to a number before adding, either directly in the template or in your component:

• Template-side conversion:

  <button [routerLink]="['/user', Number(userId) + 1]">Next</button>
  

  Or use the unary + operator for shorthand:

  <button [routerLink]="['/user', +userId + 1]">Next</button>
  

• Component-side handling (cleaner if you reuse this logic):
  In your component class:

  getNextUserId(): number {
    // Ensure userId is a number before incrementing
    return Number(this.userId) + 1;
  }
  

  Then in the template:

  <button [routerLink]="['/user', getNextUserId()]">Next</button>
  

2. You're using string interpolation instead of property binding for routerLink #

If you wrote your routerLink using string interpolation like this:

<button routerLink="/user/{{userId + 1}}">Next</button>

Even if userId is a number, template interpolation treats the result as a string, which can lead to unexpected behavior if the type isn't explicitly handled. Using property binding (the square brackets [routerLink]) lets Angular evaluate the expression as TypeScript logic, which respects numerical operations.

Fix: Switch to property binding with an array syntax (this is also the recommended way to pass route parameters):

<button [routerLink]="['/user', userId + 1]">Next</button>

Just make sure userId is a number here, or add the type conversion as mentioned in the first fix.

3. Double-check your component's userId initialization #

Quick sanity check: In your component, is userId initialized as a string? For example:

// ❌ Bad: string type causes concatenation
userId = '1';

// ✅ Good: number type works for addition
userId = 1;

If it's coming from an API, parse it to a number when you fetch it:

this.userId = Number(apiResponse.userId);

内容的提问来源于stack exchange，提问作者Yashwanth Potu