首页 > 其他分享 >angular—————————— 表格分页器的汉化

angular—————————— 表格分页器的汉化

时间:2022-12-16 16:56:07浏览次数:57  
标签:paginator pageSize 表格 module 汉化 length import 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 { }

 

标签:paginator,pageSize,表格,module,汉化,length,import,angular
From: https://www.cnblogs.com/Hijacku/p/16987783.html

相关文章