Angular分页组件数字被解析为字符串导致计算异常求助

我一眼就揪出问题所在啦——你虽然在分页组件里把currentPage定义成了number类型，但父组件传值的方式不对，导致它实际变成了字符串类型！

问题根源 #

当你在父组件模板里写currentPage=0的时候，Angular会把它当作字符串字面量传递，而不是数字0。这就导致子组件里的this.currentPage其实是字符串"0"，执行this.currentPage += 1时，就触发了字符串拼接逻辑："0" + 1 = "01"，多次点击后自然就出现"01111"这种奇怪的结果。

解决方案 #

方案1：用属性绑定传递数字（最直接的修复）

把父组件里的currentPage=0改成带方括号的属性绑定，这样Angular会自动把它解析成数字类型：

<pagination 
  [totalItems]="totalItems" 
  [itemsPerPage]="10"  <!-- 这里也建议加上方括号，保持统一规范 -->
  [currentPage]="0" 
  (setPrevious)="setPage($event)" 
  (setNext)="setPage($event)"
>
</pagination>

方案2：子组件内强制类型转换（双重保障）

为了避免后续再出现类似的类型不匹配问题，你可以在子组件里主动把currentPage转换成数字后再操作：

nextClicked() {
  // 先转成数字再执行加法
  this.currentPage = Number(this.currentPage) + 1;
  this.setNext.emit(this.currentPage);
}

prevClicked() {
  const currentPageNum = Number(this.currentPage);
  if (currentPageNum > 0) {
    this.currentPage = currentPageNum - 1;
  }
  this.setPrevious.emit(this.currentPage);
}

或者更严谨一点，给@Input()加个setter来做类型校验：

private _currentPage: number = 0;
@Input() set currentPage(value: number | string) {
  // 确保不管传什么，最终都是数字类型，默认值设为0
  this._currentPage = typeof value === 'string' ? parseInt(value, 10) : value || 0;
}
get currentPage(): number {
  return this._currentPage;
}

总结 #

核心问题就是属性绑定方式错误导致的类型不匹配，优先用方括号传递数字类型的输入属性，再配合子组件内的类型校验，就能彻底解决这个字符串拼接的bug啦！

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