如何使用MatpinatorIntl？
如何使用MatpinatorIntl？
提问于 2018-08-09 04:34:04
我正在使用MatPaginator组件，我正在试图弄清楚如何翻译这些标签。
我按照以下步骤操作：
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
但是，它根本不会改变任何东西。
回答 2
Stack Overflow用户
发布于 2018-08-09 13:19:23
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
Stack Overflow用户
发布于 2018-08-09 13:57:01
基于Vinko Vorih代码，我制作了一个使用NGX翻译的分页器，下面是代码：
import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from "@ngx-translate/core";
export class PaginatorIntlService extends MatPaginatorIntl {
translate: TranslateService;
itemsPerPageLabel = 'Items per page';
nextPageLabel = 'Next page';
previousPageLabel = 'Previous page';
getRangeLabel = function (page, pageSize, length) {
const of = this.translate ? this.translate.instant('paginator.of') : 'of';
if (length === 0 || pageSize === 0) {
return '0 ' + of + ' ' + 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 + ' ' + of + ' ' + length;
};
injectTranslateService(translate: TranslateService) {
this.translate = translate;
this.translate.onLangChange.subscribe(() => {
this.translateLabels();
});
this.translateLabels();
}
translateLabels() {
this.itemsPerPageLabel = this.translate.instant('paginator.items_per_page');
this.nextPageLabel = this.translate.instant('paginator.next_page');
this.previousPageLabel = this.translate.instant('paginator.previous_page');
}
}然后在模块提供程序中输入：
{
provide: MatPaginatorIntl,
useFactory: (translate) => {
const service = new PaginatorIntlService();
service.injectTranslateService(translate);
return service;
},
deps: [TranslateService]
}这样，你可以将翻译存储在你通常的i18n文件中，如果你的web应用程序能够动态地更改区域设置，则按需翻译分页器。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100005943
复制相关文章
相似问题