Làm thế nào để sử dụng MatPaginatorIntl?

Question

Tôi đang sử dụng thành phần MatPaginator và tôi đang cố gắng tìm ra cách dịch các nhãn đó (tài liệu không rõ ràng về điều này).

tôi đã tìm thấy this article cho thấy làm thế nào để làm điều này và tôi làm theo các bước:

1 - Tôi tạo ra một tập tin gọi custom-paginator.ts và đặt sau đó:

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 - Trong app.module.ts tôi đặt:

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

Tuy nhiên, nó đơn giản không thay đổi gì cả. Tôi đang thiếu gì?

Answer 1

Bạn có thể làm điều đó như thế này: tôi cung cấp cho bạn với các nhãn croatian:

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

} 

và AppModule.ts:

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

Nó hoạt động tuyệt vời .

Ngoài ra, bạn phải nhập vào appModule.ts của bạn cả MatPaginatorIntl và MatPaginatorIntlCro

Answer 2

trong file: matPaginatorIntlCroClass.ts

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

trong File: AppModule.ts:

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

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

Nguồn: https://material.angular.io/components/paginator/api