如何使用 MatPaginatorIntl?

本文介绍了如何使用 MatPaginatorIntl?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用 MatPaginator 组件，我'我试图弄清楚如何翻译这些标签(文档对此不够清楚).

I'm using MatPaginator component and I'm trying to figure out how to translate those labels (documentation isn't clear enough about this).

我找到了这篇文章显示了如何执行此操作，我按照以下步骤操作:

I've found this article showing how to do this and I followed the steps:

1 - 我创建了一个名为 custom-paginator.ts 的文件并将以下内容放在那里:

1 - I created a file called custom-paginator.ts and put the following there:

import { MatPaginator, MatPaginatorIntl } from '@angular/material';

export class CustomPaginator extends MatPaginatorIntl {
  constructor() {
    super();
    this.nextPageLabel = ' My new label for next page';
    this.previousPageLabel = ' My new label for previous page';
    this.itemsPerPageLabel = 'Task per screen';
  }
}

2 - 在 app.module.ts 我放:

@NgModule({
  // ...
  providers: [
    {
      provide: MatPaginatorIntl,
      useClass: CustomPaginator
    }
  ]
})
export class AppModule

然而，它根本没有改变任何东西.我错过了什么?

However, it simply doesn't change nothing. What am I missing?

推荐答案

你可以这样做:我正在为您提供克罗地亚语标签:

You can do it like this:I'm providing you with croatian labels:

customClass.ts

import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material/paginator';

@Injectable()
export class MatPaginatorIntlCro extends MatPaginatorIntl {
  itemsPerPageLabel = 'Stavki po stranici';
  nextPageLabel     = 'Slijedeća stranica';
  previousPageLabel = 'Prethodna stranica';

  getRangeLabel = function (page, pageSize, length) {
    if (length === 0 || pageSize === 0) {
      return '0 od ' + length;
    }
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    // If the start index exceeds the list length, do not try and fix the end index to the end.
    const endIndex = startIndex < length ?
      Math.min(startIndex + pageSize, length) :
      startIndex + pageSize;
    return startIndex + 1 + ' - ' + endIndex + ' od ' + length;
  };

}

和 AppModule.ts:

and AppModule.ts:

providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}],

这篇关于如何使用 MatPaginatorIntl?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

CustomClass