Angular 如何使用MatPaginatorIntl?
我正在使用组件,并试图找出如何翻译这些标签(文档对此不够清楚) 我已经找到了演示如何执行此操作的方法,并遵循了以下步骤: 1-我创建了一个名为Angular 如何使用MatPaginatorIntl?,angular,typescript,angular-material,Angular,Typescript,Angular Material,我正在使用组件,并试图找出如何翻译这些标签(文档对此不够清楚) 我已经找到了演示如何执行此操作的方法,并遵循了以下步骤: 1-我创建了一个名为custom paginator.ts的文件,并将以下内容放在那里: import { MatPaginator, MatPaginatorIntl } from '@angular/material'; export class CustomPaginator extends MatPaginatorIntl { constructor() {
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
I中输入:
@NgModule({
// ...
providers: [
{
provide: MatPaginatorIntl,
useClass: CustomPaginator
}
]
})
export class AppModule
然而,这并不能改变任何事情。我错过了什么?你可以这样做:
我为您提供克罗地亚标签:
customClass.ts
import { Injectable } from '@angular/core';
import { MatPaginatorIntl } from '@angular/material/paginator';
@Injectable()
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;
};
}
文件中: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:
providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCro}],
import { MatPaginatorModule, MatPaginatorIntl} from '@angular/material';
import { MatPaginatorIntlCro } from './matPaginatorIntlCroClass'
@NgModule({
imports: [],
providers: [{ provide: MatPaginatorIntl, useClass: 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');
}
}
这样,您可以将翻译存储在常用的i18n文件中,如果您的web应用程序能够动态更改区域设置,则paginator将根据需要进行翻译。我做了一些修改,以在开始索引超过列表长度时修复结束索引。我还添加了第一页和最后一页的翻译。用于@angular/material 5.2.4分页组件
从'@angular/core'导入{Injectable};
从“@angular/material”导入{MatPaginatorIntl};
从'@ngx translate/core'导入{TranslateService};
@可注射()
导出类MatPaginationIntlService扩展MatPaginatorIntl{
翻译:翻译服务;
firstPageLabel='第一页';
itemsPerPageLabel='每页项目';
lastPageLabel='最后一页';
下一页标签='下一页';
previousPageLabel='上一页';
getRangeLabel=(页面:编号,页面大小:编号,长度:编号):字符串=>{
const of=this.translate?this.translate.instant('mat-paginator-intl.of'):'of';
如果(长度===0 | |页面大小===0){
返回长度为+''+的'0'+;
}
长度=数学最大值(长度,0);
常量startIndex=((页面*页面大小)>长度)?
(数学单元(长度/页面大小)-1)*页面大小:
页面*页面大小;
const endIndex=Math.min(startIndex+pageSize,length);
返回startIndex+1+'-'+endIndex+''+of+''长度;
};
injectTranslateService(翻译:TranslateService){
this.translate=翻译;
this.translate.onLangChange.subscribe(()=>{
这个。translateLabels();
});
这个。translateLabels();
}
translateLabels(){
this.firstPageLabel=this.translate.instant('mat-paginator-intl.first_page');
this.itemsPerPageLabel=this.translate.instant('mat-paginator-intl.items每页');
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.previousPageLabel');
}
}
要刷新标签,可以在标签更改后触发更改事件:
translateLabels() {
this.firstPageLabel = this.translate.instant('mat-paginator-intl.first_page');
...
this.changes.next();
}
此外,您还可以通过将Intl本身标记为可注入服务来使用注入服务。参见示例(忽略DoneSubject和LocalizeService的细节,因为它们是自定义实现):
从'@angular/core'导入{Injectable,OnDestroy};
从“@angular/material”导入{MatPaginatorIntl};
从'app/general'导入{LocalizeService};
从'app/rx'导入{DoneSubject};
从“rxjs/operators”导入{takeUntil};
@可注射()
导出类MatPaginatorIntlLoc扩展MatPaginatorIntl实现OnDestroy{
构造函数(专用只读定位器:LocalizeService){
超级();
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=(页面:编号,页面大小:编号,长度:编号)=>this.localizer
.translate('mat分页器标签:x/y'[
长度>0&&pageSize>0?(页面*pageSize+1)+'-'+数学最小值((页面+1)*页面大小,数学最大值(长度,0)):0,
数学最大值(长度,0),
]);
}
别忘了在您的模块中提供:
提供者:[
...
{提供:MatPaginatorIntl,使用类:MatPaginatorIntlLoc},
...
]
在应用程序中的任意位置注入MatPaginatorIntl,设置所需的翻译并调用更改。next()。在每次语言更改时重复此操作(例如,在使用ngx translate时订阅onLangChange)。我遇到了相同的问题,然后我在imports语句TranslateModule中的app.module.ts中更改为TranslateModule.forRoot()
看起来是这样的:
imports: [
...
TranslateModule.forRoot()
...
]
NPM网站的报价:
forRoot静态方法是一种同时提供和配置服务的约定。请确保只在应用程序的根模块中调用此方法,大部分时间称为AppModule。此方法允许您通过指定加载程序、解析器和/或缺少的翻译处理程序来配置TranslateModule
全文如下:
阅读本文有助于解决TranslateModule的许多问题 如果你想让一个带有ngx translate的动态语言开关为你服务,这里有一个解决方案,它对我很有效 mat-paginator-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();
});
}
}
en.json等
{
"Items per page:": "Items per page:",
"Next page": "Next page",
"Previous page": "Previous page",
"First page": "First page",
"Last page": "Last page",
}
您应该从构造函数中删除标签的初始化,它应该可以工作。我正在尝试使用它,除了初始加载之外,它都可以按预期工作。当网站呈现时,还没有加载任何语言,我需要触发一个重新渲染器,以便开始翻译。你有解决办法吗?它有效。我用过
@NgModule({
// ...
providers: [
{
provide: MatPaginatorIntl,
useClass: MatPaginatorI18nService,
},
],
})
export class AppModule {
// ...
{
"Items per page:": "Items per page:",
"Next page": "Next page",
"Previous page": "Previous page",
"First page": "First page",
"Last page": "Last page",
}