动态更改MatPaginatorIntl itemsPerPageLabel

Question

我使用的是Angular 7.3.9，我有两个不同组件的两个列表，带有一个MatPaginator。因此，我创建了一个文件夹" paginator“，其中包含一个法语-paginator-intl.ts文件，我将在其中转换paginator并定义标签。我希望分页器的itemsPerPageLabel在第一个列表中显示“Barèmes par page”，在第二个列表中显示“Compétitions par page”。

我的文件是这样的：

import { MatPaginatorIntl } from '@angular/material';

const frenchRangeLabel = (page: number, pageSize: number, length: number) => {
    if (length == 0 || pageSize == 0) { return `0 sur ${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} sur ${length}`;
}

export function getFrenchPaginatorIntl(label: string) {
    const paginatorIntl = new MatPaginatorIntl();

    paginatorIntl.itemsPerPageLabel = label + ' par page : ';
    paginatorIntl.nextPageLabel = 'Page suivante';
    paginatorIntl.previousPageLabel = 'Page précédente';
    paginatorIntl.getRangeLabel = frenchRangeLabel;

    console.log(paginatorIntl.itemsPerPageLabel);
    return paginatorIntl;
  }

我的competition.module.ts：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CompetitionComponent } from './competition.component';
import { RouterModule } from '@angular/router';
import { MaterialModule } from '../material/material.module';

import { CompetitionListComponent } from '../competition-list/competition-list.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {MatExpansionModule} from '@angular/material/expansion';
import { MatSortModule, MatTableModule, MatPaginatorModule, MatPaginatorIntl, MatTooltipModule } from '@angular/material';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { getFrenchPaginatorIntl } from '../paginator/french-paginator-intl';


@NgModule({
  declarations: [CompetitionComponent],
  imports: [
    CommonModule,
    MaterialModule,
    FormsModule,
    ReactiveFormsModule,
    MatExpansionModule,
    MatSortModule,
    MatTableModule,
    MatPaginatorModule,
    MatCheckboxModule,
    MatTooltipModule,
    RouterModule.forChild([
      {path: 'contests/:id', component: CompetitionComponent},
      //{path: 'contest', redirectTo:'/contests'},
      {path:'contests', component: CompetitionListComponent}
      ])
  ],
  providers: [
    { provide: MatPaginatorIntl, useValue: getFrenchPaginatorIntl('Barèmes') }
  ]
})
export class CompetitionModule { }

用'Barèmes'代替'Compétitions'，我的competition list.module.ts是一样的

我的competition.component.html：

<div>
    <div class="custom-card contest">
      <div class="custom-card-title">
        <h1>{{competition.label}}</h1><a *ngIf="user.authorities.includes('ROLE_ADMIN')" [routerLink]="['/addscales']" [state]="{contestId: competition.id}"><mat-icon class="mat-icon notranslate material-icons mat-icon-no-color add-icon" role="img" aria-hidden="true">add</mat-icon>Créer un barème</a>
      </div>
      <form class="custom-card-body" #competitionForm="ngForm">
        <div class="custom-card-row">
          <p><span>Du</span> {{competition.startDate | date:'shortDate'}} à {{ competition.startDate | date:'shortTime' }} <span>au</span> {{competition.endDate | date:'shortDate'}} à {{ competition.endDate | date:'shortTime' }}</p>
        </div>
        <div class="custom-card-row">
          <p class="error">{{error}}</p>
        </div>
        <div class="custom-card-row">
          <button class="material-btn-highlight" (click)="goToContestUpdate()">Modifier</button>
          <button class="material-btn-delete" (click)="openDialog()">Supprimer</button>
          <button class="material-btn-cancel" (click)="goToList()">Retour</button>
        </div>
      </form>
    </div>
    <mat-accordion *ngIf="user.authorities.includes('ROLE_ADMIN')">
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            Barèmes
          </mat-panel-title>
        </mat-expansion-panel-header>

        <mat-table #table [dataSource]="dataSource" matSort>
          <ng-container matColumnDef="label">
            <mat-header-cell *matHeaderCellDef mat-sort-header>Nom</mat-header-cell>
            <mat-cell *matCellDef="let element">
              {{element['label']}}
            </mat-cell>    
          </ng-container>
          <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
            <mat-header-cell *matHeaderCellDef> {{column.value}} </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element[column.id]}}</mat-cell>
          </ng-container>
          <ng-container matColumnDef="admin">
              <mat-header-cell *matHeaderCellDef></mat-header-cell>
              <mat-cell *matCellDef="let element">
                <mat-icon matTooltip="Modifier ce barème" (click)="goToScaleUpdate(element.id); $event.stopPropagation()" class="mat-icon notranslate material-icons mat-icon-no-color" role="img" aria-hidden="true">edit</mat-icon>
                <mat-icon matTooltip="Supprimer ce barème" (click)="openDialog(element.id); $event.stopPropagation()" class="mat-icon notranslate material-icons mat-icon-no-color" role="img" aria-hidden="true">cancel</mat-icon>
                <mat-checkbox matTooltip="Activer/Désactiver ce barème" [checked]="element.active" (click)="$event.stopPropagation()"></mat-checkbox>
              </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;" [ngClass]="{'activeScale': row.active}" [matTooltip]="row.active ? 'Barème actif' : null"></mat-row>
        </mat-table>
        <mat-paginator [pageSizeOptions]="[10, 25, 100]"></mat-paginator>
      </mat-expansion-panel>
    </mat-accordion>
  </div>

当我运行我的应用程序时，分页器在两个列表上显示'Barèmes‘。一个console.log(paginatorIntl.itemsPerPageLabel)给了我这个：

Barèmes par page : 
Compétitions par page : 

有没有一种简单的方法来实现这一点？

Answer 1

您可以在此StackBlitz Link中找到完整的工作示例

export class AppComponent  {
   @ViewChild(MatPaginator, {static : false}) paginator: MatPaginator;
   pageEvent;

   ngAfterViewInit(){
      this.paginator._intl.itemsPerPageLabel = 'Barèmes par page ';
   }

   onPaginateChange(pageNumber){
      if (pageNumber.pageIndex === 1){
         this.paginator._intl.itemsPerPageLabel = 'Compétitions par page ';
      }
      else{
         this.paginator._intl.itemsPerPageLabel = 'rest of the page '
      }
   }
}

您的HTML文件是..

<mat-paginator [length]="100"
          [pageSize]="10"
          [pageSizeOptions]="[5, 10, 25, 100]"
          (page)="pageEvent = $event; onPaginateChange($event)">
</mat-paginator>