如何使用MatPaginatorIntl？

我使用的是MatPaginator组件，我试图弄清楚如何翻译这些标签（文档不够清楚）。如何使用MatPaginatorIntl？

我发现this article展示了如何做到这一点，我遵循的步骤：

1 - 我创建了一个名为custom-paginator.ts文件，并把下面的有：

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 - 在app.module.ts我把：

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

但是，它根本不会改变什么。我错过了什么？

来源

2017-10-22 dev_054

您应该删除标签的初始化来自构造函数，它应该工作。 –

你可以这样说：我为您提供克罗地亚标签：

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

}

和AppModule.ts：

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

它的伟大工程。

此外，你必须导入到你的appModule.ts都MatPaginatorIntl和MatPaginatorIntlCro

文件

来源

2017-10-23 06:57:51

：matPaginatorIntlCroClass.ts

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

在文件：AppModule.ts：

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

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

来源：https://material.angular.io/components/paginator/api

来源

2017-10-23 15:17:37 alan

如何使用MatPaginatorIntl？

回答

相关问题