如何更改垫子分页器的标签工具提示（下一个和上一个按钮）

Question

我有一个问题，我可以在下一个和上一个悬停时看到标签。如何删除或修改它们。

HTML

 <mat-paginator #paginator [length]="totalAssetsLength" [pageSize]="10" [pageSizeOptions]="[10, 20, 50]" (page)="pageEvent($event)" > </mat-paginator> 

TS：

@ViewChild(MatPaginator, {static: false}) set paginator(value: MatPaginator) { this.actualPaginator = value; } 

Answer 1

创建垫子分页器的新实例将为您提供帮助：

简单地将此添加到使用mat-paginator的组件中。

export class CustomMatPaginatorIntl extends MatPaginatorIntl {

  nextPageLabel     = '';
  previousPageLabel = '';
}

在material.module.ts中>

import { NgModule } from '@angular/core';

import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule, MatPaginatorIntl } from '@angular/material/paginator';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { CdkTableModule } from '@angular/cdk/table';
import { MatAutocompleteModule,
         MatFormFieldModule,
         MatRadioModule,
         MatCardModule } from '@angular/material';
**import { CustomMatPaginatorIntl } from '../pages/asset-list/asset-list.component';**

@NgModule({
  imports: [
    MatSelectModule,
    MatButtonModule,
    CdkTableModule,
    MatTableModule,
    MatInputModule,
    MatCheckboxModule,
    MatPaginatorModule,
    MatSortModule,
    MatMenuModule,
    MatRadioModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    MatCardModule,



  ],
  exports: [
    MatSelectModule,
    MatButtonModule,
    MatTableModule,
    MatInputModule,
    MatCheckboxModule,
    MatPaginatorModule,
    MatSortModule,
    MatMenuModule,
    MatRadioModule,
    MatAutocompleteModule,
    MatFormFieldModule,
    MatCardModule,

  ],
  **providers: [{provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl}]**
})
export class MaterialModule {

 }
这将帮助您，您可以访问https://material.angular.io/components/paginator/api

更多]

在您的组件类中，您需要使用MatPaginator获得对@ViewChild的引用。通过此参考，您可以访问MatPaginatorIntl服务，该服务可让您更改不同的标签。

以下示例将隐藏上一个和下一个按钮的工具提示。

@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;

ngOnInit() {
    const paginatorIntl = this.paginator._intl;
    paginatorIntl.nextPageLabel = '';
    paginatorIntl.previousPageLabel = '';
}
以下示例将更改上一个和下一个按钮的工具提示。
@ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;

ngOnInit() {
    const paginatorIntl = this.paginator._intl;
    paginatorIntl.nextPageLabel = '+ 1 page';
    paginatorIntl.previousPageLabel = '- 1 page';
}

Answer 2

在您的组件类中，您需要使用MatPaginator获得对@ViewChild的引用。通过此参考，您可以访问MatPaginatorIntl服务，该服务可让您更改不同的标签。