Jak korzystać z MatPaginatorIntl?

Question

Używam komponentu MatPaginator i staram się wymyślić, jak przetłumaczyć te etykiety (dokumentacja nie jest wystarczająco jasna na ten temat).

Znalazłem this article pokazujący jak to zrobić, a ja za etapy:

1 - Stworzyłem plik o nazwie custom-paginator.ts i umieścić tam następujące:

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 - W app.module.ts I put:

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

Po prostu nic nie zmienia. czego mi brakuje?

Answer 1

Można to zrobić tak: jestem dostarczając chorwackich etykiet:

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

} 

i AppModule.ts:

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

działa świetnie .

Również trzeba zaimportować do appModule.ts zarówno MatPaginatorIntl i MatPaginatorIntlCro

Answer 2

w pliku: matPaginatorIntlCroClass.ts

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

w Plik: AppModule.ts:

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

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

Źródło: https://material.angular.io/components/paginator/api