Как изменить метку всплывающей подсказки коврика для страницы (кнопки «Следующая» и «Предыдущая»)

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

В вашем классе компонентов вам нужно получить ссылку на 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

Создание нового экземпляра mat paginator поможет вам:

Просто добавьте это в свой компонент, где вы используете 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

для получения дополнительной информации