Как перевести mat-paginator в Angular 4?

Ответ 1

Вы можете использовать MatPaginatorIntl для этого. Уилл Шоуэлл сделал пример, который больше не работает, так что вот обновленная версия (с голландским языком) и пошаговое руководство.

1. Импортируйте MatPaginatorIntl из @angular/material в свое приложение.
2. Создайте новый файл paginator для вашей локали (в этом примере я использую голландский) и импортируйте его: import { getDutchPaginatorIntl } from './app/dutch-paginator-intl'; в файл main.ts
3. Установите provider для Paginator внутри файла main.ts, чтобы он принимал переводы вашего локального файла (вместо английского в качестве языка по умолчанию):

    providers: [
       { provide: MatPaginatorIntl, useValue: getDutchPaginatorIntl() }
    ]

4. Внутри вашего файла paginator-intl установите метки для строк, которые можно перевести, и экспортируйте их. Наиболее важная часть этого файла (см. пример для получения дополнительной информации):

    paginatorIntl.itemsPerPageLabel = 'Items per pagina:';
    paginatorIntl.firstPageLabel = 'Eerste pagina';
    paginatorIntl.previousPageLabel = 'Vorige pagina';
    paginatorIntl.nextPageLabel = 'Volgende pagina';
    paginatorIntl.lastPageLabel = 'Laatste pagina';
    paginatorIntl.getRangeLabel = dutchRangeLabel;

Пример использования StackBlitz с файлом перевода страниц в качестве отправной точки.

Июнь 2018 г. - обновление до версии Angular 6.x
Этот обновленный пример для StackBlitz обновлен до версии Angular 6.x, чтобы соответствовать последней версии платформы. Изменились только пакеты, ничего не изменилось внутри страницы.

Июнь 2019 г. - обновление до Angular 8.x
Этот обновленный пример для StackBlitz обновлен до Angular 8.x, чтобы соответствовать последней версии платформы. Изменились только пакеты, внутри paginator ничего не изменилось.

Ответ 2

Модифицированное решение (с Angular 6), основанное на принятом ответе с @ngx-translate:

@NgModule({
  imports: [...],
  providers: [
    {
      provide: MatPaginatorIntl, deps: [TranslateService],
      useFactory: (translateService: TranslateService) => new PaginatorI18n(translateService).getPaginatorIntl()
    }
  ]
})
export class CoreModule {}

И PaginatorI18n

import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';

export class PaginatorI18n {

    constructor(private readonly translate: TranslateService) {}

    getPaginatorIntl(): MatPaginatorIntl {
        const paginatorIntl = new MatPaginatorIntl();
        paginatorIntl.itemsPerPageLabel = this.translate.instant('ITEMS_PER_PAGE_LABEL');
        paginatorIntl.nextPageLabel = this.translate.instant('NEXT_PAGE_LABEL');
        paginatorIntl.previousPageLabel = this.translate.instant('PREVIOUS_PAGE_LABEL');
        paginatorIntl.firstPageLabel = this.translate.instant('FIRST_PAGE_LABEL');
        paginatorIntl.lastPageLabel = this.translate.instant('LAST_PAGE_LABEL');
        paginatorIntl.getRangeLabel = this.getRangeLabel.bind(this);
        return paginatorIntl;
    }

    private getRangeLabel(page: number, pageSize: number, length: number): string {
        if (length === 0 || pageSize === 0) {
            return this.translate.instant('RANGE_PAGE_LABEL_1', { 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 this.translate.instant('RANGE_PAGE_LABEL_2', { startIndex: startIndex + 1, endIndex, length });
    }
}

и cz.json

{
    "ITEMS_PER_PAGE_LABEL": "Počet řádků:",
    "NEXT_PAGE_LABEL": "Další stránka",
    "PREVIOUS_PAGE_LABEL": "Předchozí stránka",
    "FIRST_PAGE_LABEL": "První stránka",
    "LAST_PAGE_LABEL": "Poslední stránka",
    "RANGE_PAGE_LABEL_1": "0 z {{length}}",
    "RANGE_PAGE_LABEL_2": "{{startIndex}} - {{endIndex}} z {{length}}"
}  

Сконфигурируйте ngx-translate в app.module.ts:

import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
const httpLoaderFactory = (http: HttpClient) => new TranslateHttpLoader(http, './assets/i18n/', '.json');
@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: { provide: TranslateLoader, useFactory: httpLoaderFactory, deps: [HttpClient] }
    })
  ],
  providers: [{ provide: LOCALE_ID, useValue: 'cs' }],
  bootstrap: [AppComponent]
})
export class AppModule { }

Ответ 3

Для быстрого и грязного решения используйте свойство this.paginator._intl.

В моем ...component.ts меня есть:

@ViewChild(MatPaginator) paginator: MatPaginator;

ngOnInit() {
  ...
  this.paginator._intl.itemsPerPageLabel = 'My translation for items per page.';
  ...
}

Ответ 4

Если вы хотите, чтобы динамический языковой переключатель с ngx-translate работал для вас, вот решение, оно работает для меня. Вот мой ответ.

fooobar.com/questions/632568/...

Ответ 5

PlusMinus опубликовал динамическое решение о том, как переводить MatPaginator вместе с ngx-translate: как использовать MatPaginatorIntl?

Ответ 6

this.dataSource.paginator._intl.itemsPerPageLabel = "Your string here";

это работало в последней версии angular8 + material8;

Ответ 7

Вы можете взломать свой путь в MatPaginator._intl и поместить туда свою строку, используя ngx-translate.

forkJoin({
  itemsPerPageLabel: this.translate.get('paginator.itemsPerPageLabel'),
  nextPageLabel: this.translate.get('paginator.nextPageLabel'),
  previousPageLabel: this.translate.get('paginator.previousPageLabel'),
  firstPageLabel: this.translate.get('paginator.firstPageLabel'),
  lastPageLabel: this.translate.get('paginator.lastPageLabel'),
}).subscribe(values => {
  this.paginator._intl.itemsPerPageLabel = values.itemsPerPageLabel;
  this.paginator._intl.nextPageLabel = values.nextPageLabel;
  this.paginator._intl.previousPageLabel = values.previousPageLabel;
  this.paginator._intl.firstPageLabel = values.firstPageLabel;
  this.paginator._intl.lastPageLabel = values.lastPageLabel;

  // 1 – 10 of 100
  // https://github.com/angular/components/blob/master/src/material/paginator/paginator-intl.ts#L41
  this.paginator._intl.getRangeLabel = (page: number, pageSize: number, length: number): string => {
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
    return this.translate.instant('paginator.getRangeLabel', {
      startIndex: startIndex + 1,
      endIndex,
      length,
    });
  };

  // Otherwise, the paginator won't be shown as translated.
  this.dataSource.paginator = this.paginator;
});