内容转载自:(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 { }
标签:paginator,pageSize,表格,module,汉化,length,import,angular From: https://www.cnblogs.com/Hijacku/p/16987783.html