web-dev-qa-db-ja.com

MatPaginatorIntlの使用方法は？

私は MatPaginator コンポーネントを使用しており、これらのラベルを翻訳する方法を見つけようとしています（ドキュメントは明確ではありませんこれについては十分です）。

この記事 これを行う方法を示していることがわかり、手順に従いました：

1-custom-paginator.tsというファイルを作成し、そこに以下を配置しました：

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

ただし、単に何も変更されません。私は何が欠けていますか？

angularangular-material2
39
dev_054

次のようにできます：クロアチア語のラベルを提供しています：

customClass.ts

import {MatPaginatorIntl} from '@angular/material';
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：

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

うまくいきます。

また、MatPaginatorIntlとMatPaginatorIntlCroの両方をappModule.tsにインポートする必要があります

52
Vinko Vorih

Vinko Vorihコードに基づいて、ngx-translateで作業するページネーターを作成しました。以下にコードを示します。

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

export class PaginatorIntlService extends MatPaginatorIntl {
  translate: TranslateService;
  itemsPerPageLabel = 'Items per page';
  nextPageLabel     = 'Next page';
  previousPageLabel = 'Previous page';
  getRangeLabel = function (page, pageSize, length) {
    const of = this.translate ? this.translate.instant('paginator.of') : 'of';
    if (length === 0 || pageSize === 0) {
      return '0 ' + of + ' ' + 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 + ' ' + of + ' ' + length;
  };

  injectTranslateService(translate: TranslateService) {
    this.translate = translate;

    this.translate.onLangChange.subscribe(() => {
      this.translateLabels();
    });

    this.translateLabels();
  }

  translateLabels() {
    this.itemsPerPageLabel = this.translate.instant('paginator.items_per_page');
    this.nextPageLabel = this.translate.instant('paginator.next_page');
    this.previousPageLabel = this.translate.instant('paginator.previous_page');
  }

}

そして、モジュールプロバイダーエントリで：

{
  provide: MatPaginatorIntl,
  useFactory: (translate) => {
    const service = new PaginatorIntlService();
    service.injectTranslateService(translate);
    return service;
  },
  deps: [TranslateService]
}

これにより、通常のi18nファイルに翻訳を保存でき、Webアプリがロケールを動的に変更できる場合、paginatorはオンデマンドで翻訳されます。

24
Ze Big Duck

ファイル内：matPaginatorIntlCroClass.ts

import {MatPaginatorIntl} from '@angular/material';
export class MatPaginatorIntlCro extends MatPaginatorIntl {
  itemsPerPageLabel = 'Items par page';
  nextPageLabel     = 'Page Prochaine';
  previousPageLabel = 'Page Précedente';
}

ファイル：AppModule.ts：

import { MatPaginatorModule, MatPaginatorIntl} from '@angular/material';
import { MatPaginatorIntlCro } from './matPaginatorIntlCroClass'

@NgModule({
  imports: [],
  providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}],
  ..
})

ソース： https://material.angular.io/components/paginator/api

11
Alan

Ngx-translateを使用した動的言語切り替えが機能するようにしたい場合、これが解決策です。

mat-paginator-i18n.service.ts

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

const ITEMS_PER_PAGE = 'Items per page:';
const NEXT_PAGE = 'Next page';
const PREV_PAGE = 'Previous page';
const FIRST_PAGE = 'First page';
const LAST_PAGE = 'Last page';

@Injectable()
export class MatPaginatorI18nService extends MatPaginatorIntl {
public constructor(private translate: TranslateService) {
  super();

  this.translate.onLangChange.subscribe((e: Event) => {
    this.getAndInitTranslations();
  });

  this.getAndInitTranslations();
}

public getRangeLabel = (page: number, pageSize: number, length: number): string => {
  if (length === 0 || pageSize === 0) {
    return `0 / ${length}`;
  }

  length = Math.max(length, 0);

  const startIndex: number = page * pageSize;
  const endIndex: number = startIndex < length
    ? Math.min(startIndex + pageSize, length)
    : startIndex + pageSize;

  return `${startIndex + 1} - ${endIndex} / ${length}`;
};

public getAndInitTranslations(): void {
  this.translate.get([
    ITEMS_PER_PAGE,
    NEXT_PAGE,
    PREV_PAGE,
    FIRST_PAGE,
    LAST_PAGE,
  ])
    .subscribe((translation: any) => {
      this.itemsPerPageLabel = translation[ITEMS_PER_PAGE];
      this.nextPageLabel = translation[NEXT_PAGE];
      this.previousPageLabel = translation[PREV_PAGE];
      this.firstPageLabel = translation[FIRST_PAGE];
      this.lastPageLabel = translation[LAST_PAGE];

      this.changes.next();
    });
}
}

モジュール内のAppModule

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

en.jsonなど.

{
  "Items per page:": "Items per page:",
  "Next page": "Next page",
  "Previous page": "Previous page",
  "First page": "First page",
  "Last page": "Last page",
}
5
PlusMinus

開始インデックスがリストの長さを超えたときに終了インデックスを修正するために、いくつかの変更を行いました。最初と最後のページの翻訳も追加します。 @ angular/material 5.2.4ページネーションコンポーネント用です。

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

@Injectable()
export class MatPaginationIntlService extends MatPaginatorIntl {
  translate: TranslateService;
  firstPageLabel = 'First page';
  itemsPerPageLabel = 'Items per page';
  lastPageLabel = 'Last page';
  nextPageLabel = 'Next page';
  previousPageLabel = 'Previous page';

  getRangeLabel = (page: number, pageSize: number, length: number): string => {
    const of = this.translate ? this.translate.instant('mat-paginator-intl.of') : 'of';
    if (length === 0 || pageSize === 0) {
      return '0 ' + of + ' ' + length;
    }
    length = Math.max(length, 0);
    const startIndex = ((page * pageSize) > length) ?
      (Math.ceil(length / pageSize) - 1) * pageSize:
      page * pageSize;

    const endIndex = Math.min(startIndex + pageSize, length);
    return startIndex + 1 + ' - ' + endIndex + ' ' + of + ' ' + length;
  };

  injectTranslateService(translate: TranslateService) {
    this.translate = translate;

    this.translate.onLangChange.subscribe(() => {
      this.translateLabels();
    });

    this.translateLabels();
  }

  translateLabels() {
    this.firstPageLabel = this.translate.instant('mat-paginator-intl.first_page');
    this.itemsPerPageLabel = this.translate.instant('mat-paginator-intl.items_per_page');
    this.lastPageLabel = this.translate.instant('mat-paginator-intl.last_page');
    this.nextPageLabel = this.translate.instant('mat-paginator-intl.next_page');
    this.previousPageLabel = this.translate.instant('mat-paginator-intl.previous_page');
  }
}
5
Sébastien Côté

ラベルを更新するには、ラベルの変更後に変更イベントを起動できます。

translateLabels() {
    this.firstPageLabel = this.translate.instant('mat-paginator-intl.first_page');
    ...
    this.changes.next();
}
4
user3706681

さらに、Intl自体を注入可能としてマークすることにより、注入されたサービスを使用できます。例を参照してください（DoneSubjectとLocalizeServiceの詳細はカスタム実装であるため無視してください）：

    import { Injectable, OnDestroy } from '@angular/core';
    import { MatPaginatorIntl } from '@angular/material';
    import { LocalizeService } from 'app/general';
    import { DoneSubject } from 'app/rx';
    import { takeUntil } from 'rxjs/operators';

    @Injectable()
    export class MatPaginatorIntlLoc extends MatPaginatorIntl implements OnDestroy {
      constructor(private readonly localizer: LocalizeService) {
        super();

        localizer.locale$.pipe(takeUntil(this.done$)).subscribe(() => {
          this.itemsPerPageLabel = localizer.translate('mat paginator label: items per page');
          this.nextPageLabel = localizer.translate('mat paginator label: next page');
          this.previousPageLabel = localizer.translate('mat paginator label: previous page');
          this.firstPageLabel = localizer.translate('mat paginator label: first page');
          this.lastPageLabel = localizer.translate('mat paginator label: last page');
        });
      }

      private readonly done$ = new DoneSubject();

      ngOnDestroy() { this.done$.done(); }

      getRangeLabel = (page: number, pageSize: number, length: number) => this.localizer
        .translate('mat paginator label: x of y', [
          length > 0 && pageSize > 0 ? (page * pageSize + 1) + ' - ' + Math.min((page + 1) * pageSize, Math.max(length, 0)) : 0,
          Math.max(length, 0),
        ]);
    }

モジュールで提供することを忘れないでください：

    providers: [
        ...
        { provide: MatPaginatorIntl, useClass: MatPaginatorIntlLoc },
        ...
      ]
0
Alex Rempel

私は同じ問題を抱えていたので、apps.module.tsのimportsステートメントTranslateModuleをTranslateModule.forRoot（）に変更しました

したがって、次のようになります。

imports: [
    ...
    TranslateModule.forRoot()
    ...
]

NPMのサイトからの引用：「forRoot静的メソッドは、サービスを同時に提供および構成する規則です。アプリケーションのルートモジュールでのみこのメソッドを呼び出すようにしてください。ほとんどの場合、AppModuleと呼ばれます。ローダー、パーサー、および/または不足している翻訳ハンドラを指定して、TranslateModuleを構成します。」

ここに記事全体があります： https://www.npmjs.com/package/@ngx-translate/core

これを読むと、TranslateModuleの多くの問題を解決するのに役立ちます！

0
Gefilte Fish

アプリケーション内の任意の場所にMatPaginatorIntlを挿入し、目的の翻訳を設定して、changes.next（）を呼び出します。言語の変更ごとに繰り返します（たとえば、ngx-translateを使用する場合はonLangChangeにサブスクライブします）。

0
Marcin Majkowski