Comment utiliser MatPaginatorIntl?

Vous pouvez le faire comme ceci:
Je vais vous fournir avec le croate étiquettes:

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;
  };

}

et AppModule.ts:

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

Il fonctionne très bien.

Aussi, vous devez les importer dans votre appModule.ts les deux MatPaginatorIntl et MatPaginatorIntlCro

dans le fichier: matPaginatorIntlCroClass.ts

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

dans le Fichier: AppModule.ts:

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

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

Source: https://material.angular.io/components/paginator/api

J'ai fait quelques modifications pour fixer l'extrémité de l'index lors de l'index de début de dépasser la liste de longueur. J'ai aussi ajouter la traduction pour la première et la dernière page. C'est pour @anguleuse/matière 5.2.4 la pagination composant.

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');
}
}

En outre, vous pouvez utiliser injecté services en marquant le Intl à une injection de lui-même. Voir l'exemple (ignorer les spécificités de DoneSubject et LocalizeService que ceux sont des implémentations personnalisées):

    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),
]);
}

Et ne pas oublier de prévoir dans votre module:

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

J'ai eu le même problème, et puis j'ai changé en application.le module.ts dans l'instruction imports TranslateModule à TranslateModule.forRoot()

De sorte qu'il ressemble à ceci:

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

Citation de MNP site:
"La forRoot méthode statique est une convention qui prévoit et configure les services en même temps. Assurez-vous d'appeler cette méthode dans le module racine de votre application, la plupart du temps appelé AppModule. Cette méthode permet de configurer le TranslateModule en spécifiant un chargeur, un analyseur syntaxique et/ou un manque de traductions gestionnaire."

Voici l'article en entier:
https://www.npmjs.com/package/@ngx-translate/core

Lecture, cela peut aider à résoudre de nombreux problèmes avec TranslateModule!