angular—————————— 表格分页器的汉化
内容转载自:(26条消息) Angular完整项目开发12 - 分页(Paginator)与中文显示(本地化)_小鹰信息技术服务部的博客-CSDN博客_angular paginator
本地化显示的类:paginator.translate.ts, 注意:@Injectable()必须声明。
import { Injectable } from "@angular/core";
import { MatPaginatorIntl } from "@angular/material/paginator";
@Injectable() //必须有
export class MatPaginatorIntlCN extends MatPaginatorIntl { //起名为MatPaginatorIntlCN,针对中文
itemsPerPageLabel = '每页数量';
nextPageLabel = '下一页';
previousPageLabel = '上一页';
firstPageLabel = '首页';
lastPageLabel = '尾页';
getRangeLabel = function (page:number, pageSize:number, length:number) {
if (length === 0 || pageSize === 0) {
return '0 到 ' + length;
}
length = Math.max(length, 0);
const startIndex = page * pageSize;
const endIndex = startIndex < length ?
Math.min(startIndex + pageSize, length) :
startIndex + pageSize;
return startIndex + 1 + ' - ' + endIndex + ' / ' + length;
};
}
然后在 app.module.ts 中导入:
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { CoreModule } from '@core/core.module';
import { LoginModule } from '@modules/login/login.module';
import { HomeModule } from '@home/home.module';
import { AppComponent } from './app.component';
import { DashboardRoutingModule } from '@modules/dashboard/dashboard-routing.module';
import { RouterModule, Routes } from '@angular/router';
import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material/paginator';//导入分页模块和 本地汉化类
import {MatPaginatorIntlCN} from '@core/translate/paginator.translate'
const routes: Routes = [
{ path: '**',
redirectTo: 'home'
}
];
@NgModule({
imports: [
RouterModule.forChild(routes)],
exports: [RouterModule],
declarations: []
})
export class PageNotFoundRoutingModule { }
@NgModule({
declarations: [
AppComponent
],
imports: [
MatPaginatorModule,// 导入分页模块
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
CoreModule,
LoginModule,
HomeModule,
DashboardRoutingModule,
PageNotFoundRoutingModule
],
// 注入privider
providers: [{ provide: MatPaginatorIntl, useClass: MatPaginatorIntlCN }],
bootstrap: [AppComponent]
})
export class AppModule { }

浙公网安备 33010602011771号