如何将总标签添加到垫分页器范围 - 角度材料答案

【问题标题】：How can i add total label to mat paginator range - angular material如何将总标签添加到垫分页器范围 - 角度材料
【发布时间】：2020-03-09 19:34:50
【问题描述】：

预期结果

是否可以在角材料表中的20个中的1-5个之后添加标签

【问题讨论】：

标签： javascript angular angular-material

【解决方案1】：

您绝对可以使用 MatPaginatorIntl 来实现它。首先创建一个扩展 MatPaginatorIntl 的类并覆盖它的 getRangeLabel 方法。

Mat paginator api - https://material.angular.io/components/paginator/api（您可以在此处找到指南）

请使用此 stackblitz 供您参考，查看 app.component.ts 中的 MyCustomPaginatorIntl - https://stackblitz.com/edit/angular-material2-issue-jthuj9

【讨论】：

【解决方案2】：

除了 Jasdeep Singh 的answer：

如果你只是想在标签的末尾加上“total”这个词，你不需要重写getRangeLabel的默认行为，你可以在你的override中调用基类的实现并修改它的输出是这样的：

export class MyCustomPaginatorIntl extends MatPaginatorIntl {
  constructor() {
    super();
    // copy super.getRangeLabel reference before overriding it
    const superGetRangeLabel = this.getRangeLabel;
    this.getRangeLabel = (page: number, pageSize: number, length: number) => {
      return `${superGetRangeLabel(page, pageSize, length)} total`;
    };
  }
}

如果您想通过将单词“of”替换为 .replace(/of/g, 'de') 之类的其他内容来更改标签的语言，这也可以使用，尽管我会为此添加单元测试，以便您知道 lib 是否更改了默认标签当你升级它时。

【讨论】：