web-dev-qa-db-ja.com

Angular 4のmat-paginatorを翻訳する方法は？

Angular mat-paginatorタグで「ページごとのアイテム」を翻訳する方法はありますか？ mat-paginatorは、Material Designの要素です。

angularmaterial-designangular-material
32
bigmeister

これにはMatPaginatorIntlを使用できます。 Will Showellが作成 動作しなくなった例です。そこで、更新されたバージョン（オランダ語）と段階的なガイダンスがあります。

  1. MatPaginatorIntlを@angular/materialからアプリケーションにインポートします。
  2. ロケール用に新しいpaginatorファイルを作成し（この例ではオランダ語を使用）、それをインポートします：import { getDutchPaginatorIntl } from './app/dutch-paginator-intl'; in main.ts file
  3. main.tsファイル内のPaginatorにproviderを設定して、ローカルファイルの翻訳を取得します（デフォルトの言語として英語の代わりに）：
    providers: [
       { provide: MatPaginatorIntl, useValue: getDutchPaginatorIntl() }
    ]
  1. 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年6月-Angular 6.xへの更新
この更新された StackBlitz の例は、対応するためにAngular 6.xにアップグレードされます。フレームワークの最新バージョン。パッケージのみが変更され、ページネーターの内部は何も変更されていません。

2019年6月-Angular 8.xへの更新
この更新された StackBlitz の例は、対応するためにAngular 8.xにアップグレードされます。フレームワークの最新バージョン。パッケージのみが変更され、ページネーターの内部は何も変更されていません。

47
Roy

@ ngx-translate の受け入れられた回答に基づいた修正ソリューション（Angular 6）

@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}}"
}

app.module.tsでngx-translateを設定します：

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 { }
29
Felix

迅速で汚い解決策のために、this.paginator._intlプロパティを使用します。

私の...component.tsには：

@ViewChild(MatPaginator) paginator: MatPaginator;

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

PlusMinusは、MatPaginatorをngx-translateと一緒に変換する方法に関する動的なソリューションを投稿しました。 MatPaginatorIntlの使用方法

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

これは最新のangle8 + material8で機能しました。

0
shaheer shukur