Wie verwende ich MatPaginatorIntl?

Question

Ich benutze MatPaginator Komponente und ich versuche herauszufinden, wie diese Etiketten zu übersetzen (Dokumentation ist nicht klar genug darüber).

ich gefunden habe this article zeigen, wie dies zu tun, und ich folgte den Schritten:

1 - habe ich eine Datei custom-paginator.ts genannt und die dort folgende setzen:

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 - In app.module.ts I setzen:

Allerdings ändert es einfach nichts. Was vermisse ich?

Answer 1

Sie können es wie folgt tun: Ich bin die Sie mit kroatisch-Etiketten:

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

} 

und AppModule.ts:

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

Es funktioniert großartig .

Auch müssen Sie in Ihrem appModule.ts importieren beide MatPaginatorIntl und MatPaginatorIntlCro

Answer 2

in file: matPaginatorIntlCroClass.ts

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

in Datei: AppModule.ts:

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

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

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