web-dev-qa-db-fra.com

Comment traduire mat-paginator en Angular 4?

Avez-vous des idées sur la manière de traduire "Articles par page" dans la balise angulaire mat-paginator? Le mat-paginator Est un élément de Material Design.

angularmaterial-designangular-material
32
bigmeister

Vous pouvez utiliser le MatPaginatorIntl pour cela. Will Showell made un exemple qui ne fonctionne plus, voici donc une version mise à jour (avec le néerlandais) et des instructions pas à pas.

  1. Importer le MatPaginatorIntl de @angular/material dans votre application.
  2. Créez un nouveau fichier paginateur pour vos paramètres régionaux (dans cet exemple, j'utilise le néerlandais) et importez ce qui suit: import { getDutchPaginatorIntl } from './app/dutch-paginator-intl'; dans main.ts fichier
  3. Définissez un provider pour le paginateur à l'intérieur du main.ts fichier, il faut donc les traductions de votre fichier local (au lieu de l'anglais comme langue par défaut):
    providers: [
       { provide: MatPaginatorIntl, useValue: getDutchPaginatorIntl() }
    ]
  1. Dans votre fichier paginator-intl, définissez les étiquettes des chaînes pouvant être traduites et exportez-les. Partie la plus importante de ce fichier (voir l'exemple pour plus d'informations):
    paginatorIntl.itemsPerPageLabel = 'Items per pagina:';
    paginatorIntl.firstPageLabel = 'Eerste pagina';
    paginatorIntl.previousPageLabel = 'Vorige pagina';
    paginatorIntl.nextPageLabel = 'Volgende pagina';
    paginatorIntl.lastPageLabel = 'Laatste pagina';
    paginatorIntl.getRangeLabel = dutchRangeLabel;

Exemple sur StackBlitz avec le fichier de traduction de pagination comme point de départ.

juin 2018 - Mise à jour pour Angular 6.x
Ceci mis à jour Exemple sur StackBlitz est mis à niveau à Angular 6. x pour prendre en charge la dernière version du framework. Seuls les packages ont été modifiés, rien dans le paginateur n’a changé.

juin 2019 - Mise à jour pour Angular 8.x
Ceci mis à jour Exemple sur StackBlitz est mis à niveau vers Angular 8. x pour prendre en charge la dernière version du framework. Seuls les packages ont été modifiés, rien dans le paginateur n’a changé.

47
Roy

Solution modifiée (avec Angular 6) basé sur une réponse acceptée avec @ ngx-translate :

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

Et le 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 });
    }
}

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

Configurez ngx-translate dans 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 { }
29
Felix

Pour une solution rapide et incorrecte, utilisez la propriété this.paginator._intl.

Dans mon ...component.ts J'ai:

@ViewChild(MatPaginator) paginator: MatPaginator;

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

PlusMinus a publié une solution dynamique sur la traduction de MatPaginator avec ngx-translate: comment utiliser MatPaginatorIntl?

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

cela a fonctionné dans le dernier matériau angular8 +;

0
shaheer shukur