Angular分页器赋值getRangeLabel后报TypeError: this.test不是函数

问题描述 #

作为Angular新手，在为MatPaginator的getRangeLabel赋值不同方法时，原复制逻辑的代码可以正常运行，但重构为复用公共test方法后，控制台抛出错误：

ERROR TypeError: this.test is not a function
at MatPaginatorIntl.getLabel [as getRangeLabel] (xxx.ts:21:21)
at MatPaginator_Template (paginator.mjs:329:1469)
...

重构后的代码：

private getLabel(page: number, pageSize: number, length: number): string {
  return this.test(page, pageSize, length, false);
}

private getLabelWithSuffix(page: number, pageSize: number, length: number): string {
  return this.test(page, pageSize, length, true);
}

private test(page: number, pageSize: number, length: number, suffix: boolean): string {
  return 'some string result' + (suffix ? '...' : '');
}

原可运行代码：

private getLabel(page: number, pageSize: number, length: number): string {
  return 'some string result'
}

private getLabelWithSuffix(page: number, pageSize: number, length: number): string {
  return 'some string result ...'
}

赋值语句：

this.paginator._intl.getRangeLabel = this.getLabel;

错误原因 #

核心问题是函数赋值时丢失了this的上下文指向。当直接把this.getLabel赋值给paginator._intl.getRangeLabel后，该函数执行时的this不再指向当前组件实例，而是指向MatPaginatorIntl对象，自然找不到组件内的test方法，所以报错。

原代码能正常运行，是因为getLabel方法没有引用组件实例的任何属性或方法，只是直接返回字符串，即使this指向改变也不会影响结果。

解决方法 #

有三种常用方案可以修复这个问题：

方案1：使用箭头函数绑定上下文 #

箭头函数会捕获当前组件的this指向，确保调用getLabel时this依然指向组件实例：

this.paginator._intl.getRangeLabel = (page: number, pageSize: number, length: number) => {
  return this.getLabel(page, pageSize, length);
};

方案2：用bind绑定组件实例的this #

通过bind方法显式将函数的this绑定到当前组件：

this.paginator._intl.getRangeLabel = this.getLabel.bind(this);

方案3：直接在箭头函数中调用test方法 #

如果不需要单独的getLabel方法，也可以直接简化为：

this.paginator._intl.getRangeLabel = (page, pageSize, length) => {
  return this.test(page, pageSize, length, false);
};

完整示例代码 #

以方案1为例，修改后的组件代码片段：

import { Component, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  ngAfterViewInit() {
    // 修改后的赋值语句
    this.paginator._intl.getRangeLabel = (page, pageSize, length) => this.getLabel(page, pageSize, length);
  }

  private getLabel(page: number, pageSize: number, length: number): string {
    return this.test(page, pageSize, length, false);
  }

  private getLabelWithSuffix(page: number, pageSize: number, length: number): string {
    return this.test(page, pageSize, length, true);
  }

  private test(page: number, pageSize: number, length: number, suffix: boolean): string {
    return 'some string result' + (suffix ? '...' : '');
  }
}

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