我正在使用MatPaginator组件，我正在试图找出如何翻译这些标签（文档对此不够清楚）。
我发现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
但是，它根本不会改变任何东西。我错过了什么？
你可以这样做：我给你提供克罗地亚标签：
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
基于Vinko Vorih代码，我创建了一个使用ngx-translate的分页器，这里是代码：
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应用程序能够动态更改区域设置，则将根据需要翻译paginator。
在文件中：matPaginatorIntlCroClass.ts
import {MatPaginatorIntl} from '@angular/material';
export class MatPaginatorIntlCro extends MatPaginatorIntl {
itemsPerPageLabel = 'Items par page';
nextPageLabel = 'Page Prochaine';
previousPageLabel = 'Page Précedente';
}
在File：AppModule.ts中：
import { MatPaginatorModule, MatPaginatorIntl} from '@angular/material';
import { MatPaginatorIntlCro } from './matPaginatorIntlCroClass'
@NgModule({
imports: [],
providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}],
..
})
当开始索引超过列表长度时，我做了一些修改来修复结束索引。我还添加了第一页和最后一页的翻译。它适用于@ angular / material 5.2.4分页组件。
import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
@Injectable()
export class MatPaginationIntlService extends MatPaginatorIntl {
translate: TranslateService;
firstPageLabel = 'First page';
itemsPerPageLabel = 'Items per page';
lastPageLabel = 'Last page';
nextPageLabel = 'Next page';
previousPageLabel = 'Previous page';
getRangeLabel = (page: number, pageSize: number, length: number): string => {
const of = this.translate ? this.translate.instant('mat-paginator-intl.of') : 'of';
if (length === 0 || pageSize === 0) {
return '0 ' + of + ' ' + length;
}
length = Math.max(length, 0);
const startIndex = ((page * pageSize) > length) ?
(Math.ceil(length / pageSize) - 1) * pageSize:
page * pageSize;
const endIndex = Math.min(startIndex + pageSize, length);
return startIndex + 1 + ' - ' + endIndex + ' ' + of + ' ' + length;
};
injectTranslateService(translate: TranslateService) {
this.translate = translate;
this.translate.onLangChange.subscribe(() => {
this.translateLabels();
});
this.translateLabels();
}
translateLabels() {
this.firstPageLabel = this.translate.instant('mat-paginator-intl.first_page');
this.itemsPerPageLabel = this.translate.instant('mat-paginator-intl.items_per_page');
this.lastPageLabel = this.translate.instant('mat-paginator-intl.last_page');
this.nextPageLabel = this.translate.instant('mat-paginator-intl.next_page');
this.previousPageLabel = this.translate.instant('mat-paginator-intl.previous_page');
}
}
为了刷新标签，您可以在标签更改后触发更改事件：
translateLabels() {
this.firstPageLabel = this.translate.instant('mat-paginator-intl.first_page');
...
this.changes.next();
}
如果你想用ngx-translate的动态语言切换为你工作，这是解决方案，它对我有用。
垫分页程序，i18n.service.ts
import { MatPaginatorIntl } from '@angular/material';
import { TranslateService } from '@ngx-translate/core';
import { Injectable } from '@angular/core';
const ITEMS_PER_PAGE = 'Items per page:';
const NEXT_PAGE = 'Next page';
const PREV_PAGE = 'Previous page';
const FIRST_PAGE = 'First page';
const LAST_PAGE = 'Last page';
@Injectable()
export class MatPaginatorI18nService extends MatPaginatorIntl {
public constructor(private translate: TranslateService) {
super();
this.translate.onLangChange.subscribe((e: Event) => {
this.getAndInitTranslations();
});
this.getAndInitTranslations();
}
public getRangeLabel = (page: number, pageSize: number, length: number): string => {
if (length === 0 || pageSize === 0) {
return `0 / ${length}`;
}
length = Math.max(length, 0);
const startIndex: number = page * pageSize;
const endIndex: number = startIndex < length
? Math.min(startIndex + pageSize, length)
: startIndex + pageSize;
return `${startIndex + 1} - ${endIndex} / ${length}`;
};
public getAndInitTranslations(): void {
this.translate.get([
ITEMS_PER_PAGE,
NEXT_PAGE,
PREV_PAGE,
FIRST_PAGE,
LAST_PAGE,
])
.subscribe((translation: any) => {
this.itemsPerPageLabel = translation[ITEMS_PER_PAGE];
this.nextPageLabel = translation[NEXT_PAGE];
this.previousPageLabel = translation[PREV_PAGE];
this.firstPageLabel = translation[FIRST_PAGE];
this.lastPageLabel = translation[LAST_PAGE];
this.changes.next();
});
}
}
在你的模块AppModule中
@NgModule({
// ...
providers: [
{
provide: MatPaginatorIntl,
useClass: MatPaginatorI18nService,
},
],
})
export class AppModule {
// ...
en.json等
{
"Items per page:": "Items per page:",
"Next page": "Next page",
"Previous page": "Previous page",
"First page": "First page",
"Last page": "Last page",
}
此外，您可以通过将Intl标记为可注射本身来使用注入服务。请参阅示例（忽略DoneSubject和LocalizeService的细节，因为它们是自定义实现）：
import { Injectable, OnDestroy } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material';
import { LocalizeService } from 'app/general';
import { DoneSubject } from 'app/rx';
import { takeUntil } from 'rxjs/operators';
@Injectable()
export class MatPaginatorIntlLoc extends MatPaginatorIntl implements OnDestroy {
constructor(private readonly localizer: LocalizeService) {
super();
localizer.locale$.pipe(takeUntil(this.done$)).subscribe(() => {
this.itemsPerPageLabel = localizer.translate('mat paginator label: items per page');
this.nextPageLabel = localizer.translate('mat paginator label: next page');
this.previousPageLabel = localizer.translate('mat paginator label: previous page');
this.firstPageLabel = localizer.translate('mat paginator label: first page');
this.lastPageLabel = localizer.translate('mat paginator label: last page');
});
}
private readonly done$ = new DoneSubject();
ngOnDestroy() { this.done$.done(); }
getRangeLabel = (page: number, pageSize: number, length: number) => this.localizer
.translate('mat paginator label: x of y', [
length > 0 && pageSize > 0 ? (page * pageSize + 1) + ' - ' + Math.min((page + 1) * pageSize, Math.max(length, 0)) : 0,
Math.max(length, 0),
]);
}
并且不要忘记在您的模块中提供它：
providers: [
...
{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlLoc },
...
]
在应用程序的任何位置注入MatPaginatorIntl，设置所需的翻译并调用changes.next（）。重复每次语言更改（例如，在使用ngx-translate时订阅onLangChange）。
我遇到了同样的问题，然后我将import语句TranslateModule中的app.module.ts更改为TranslateModule.forRoot（）
所以它看起来像这样：
imports: [
...
TranslateModule.forRoot()
...
]
来自NPM网站的引用：“forRoot静态方法是一种同时提供和配置服务的约定。请确保只在应用程序的根模块中调用此方法，大多数时候称为AppModule。此方法允许您通过指定加载器，解析器和/或缺少的转换处理程序来配置TranslateModule。“
这是整篇文章：https://www.npmjs.com/package/@ngx-translate/core
阅读本文有助于解决TranslateModule的许多问题！