我应该如何使用 transloco i18n（国际化）库更改材料表标题以进行分页和页面范围、下一个、上一个按钮？

Question

想要使用 i18n 显示标题

Answer 1

您需要使用 MatPaginatorIntl 接口并扩展它。这是塞尔维亚标签的示例

export function getSerbianPaginatorIntl() {
  const paginatorIntl = new MatPaginatorIntl();

  paginatorIntl.itemsPerPageLabel = 'Stavki po strani:';
  paginatorIntl.nextPageLabel = 'Sledeca strana';
  paginatorIntl.previousPageLabel = 'Prethodna strana';
  paginatorIntl.getRangeLabel = serbianRangeLabel;

  return paginatorIntl;
}

完整示例在这里https://stackblitz.com/edit/angular-5mgfxh-cwgmym?file=app%2Fdutch-paginator-intl.ts

Answer 2

首先，创建一个自定义

MatPaginatorIntl

，使用

Transloco

进行翻译。

import { MatPaginatorIntl } from '@angular/material/paginator';
import { TranslocoService } from '@ngneat/transloco';

export class TranslocoPaginatorIntl extends MatPaginatorIntl {
  constructor(private _translocoService: TranslocoService) {
    super();

    this._translocoService.selectTranslateObject('table').subscribe((translation) => {
      this.itemsPerPageLabel = translation.itemsPerPage;
      this.nextPageLabel = translation.nextPage;
      this.previousPageLabel = translation.previousPage;
      this.firstPageLabel = translation.firstPage;
      this.lastPageLabel = translation.lastPage;

      this.getRangeLabel = (page, pageSize, length) => {
        if (length === 0 || pageSize === 0) {
          return `0 ${translation.of} ${length}`;
        }
        length = Math.max(length, 0);
        const startIndex = page * pageSize;
        const endIndex =
          startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
        return `${startIndex + 1} - ${endIndex} ${translation.of} ${length}`;
      };

      // This is required to update the paginator labels after the translation is loaded
      this.changes.next();
    });
  }
}

在此代码中，

TranslocoPaginatorIntl

是自定义的

MatPaginatorIntl

，它使用

Transloco

进行翻译。它订阅

'table'

键的翻译并相应地更新标签。

然后，您需要在模块中提供

TranslocoPaginatorIntl

：

import { MatPaginatorIntl } from '@angular/material/paginator';
import { TranslocoModule, TranslocoService } from '@ngneat/transloco';
import { TranslocoPaginatorIntl } from './your/path/to/transloco-paginator-intl';

@NgModule({
  imports: [
    // ... other modules
    TranslocoModule,
  ],
  providers: [
    // ... other providers
    {
      provide: MatPaginatorIntl,
      useClass: TranslocoPaginatorIntl,
      deps: [TranslocoService],
    },
  ],
  // ... other properties
})
export class YourModule {}

在此代码中，

{
  provide: MatPaginatorIntl,
  useClass: TranslocoPaginatorIntl,
  deps: [TranslocoService],
},

告诉 Angular 使用

TranslocoPaginatorIntl

而不是默认的

MatPaginatorIntl

。

注意：
请记住将

'table'

替换为翻译文件中的实际密钥，并将翻译密钥（

itemsPerPage

、

nextPage

等）替换为翻译文件中的实际密钥。我的 i18n 设置适用于 en-us 和 zh-tw。 i18n json 文件示例如下：

en-us.json

{
  "table": {
    "search": "Search",
    "keywords": "Keywords",
    "itemsPerPage": "Items per page",
    "nextPage": "Next page",
    "previousPage": "Previous page",
    "firstPage": "First page",
    "lastPage": "Last page",
    "of": "of",
    "noData": "No data",
  }
}

zh-tw.json:

{
  "table": {
    "search": "搜尋",
    "keywords": "關鍵字",
    "itemsPerPage": "每頁數量",
    "nextPage": "下一頁",
    "previousPage": "上一頁",
    "firstPage": "第一頁",
    "lastPage": "最後一頁",
    "of": "從",
    "noData": "沒有資料",
  }
}