Question

我试图隐藏由MatPaginator自动添加的字符串（每页项：1 1 – 1 of 2），我尝试通过将display:none;或display:none !important;设置为容器类，但这不起作用：

.mat-paginator-page-size{
    display: none !important;
}

.mat-paginator-range-label{
    display: none !important;
}

我只希望显示下一个和上一个箭头，而没有其他任何细节。

Answer 1

在两者前面都添加::ng-deep

::ng-deep .mat-paginator-page-size{
    display: none !important;
}

::ng-deep .mat-paginator-range-label{
    display: none !important;
}

::ng-deep强制子组件样式。

将:: ng-deep伪类完全应用于任何CSS规则禁用该规则的视图封装。任何带有:: ng-deep的样式应用成为一种全球风格。为了确定指定样式的范围到当前组件及其所有后代，请确保包括 :: ng-deep之前的：host选择器。如果:: ng-deep组合器是如果不使用：host伪类选择器，则样式可能会渗入其他组件。

https://angular.io/guide/component-styles

Answer 2

您还可以创建CustomMatPaginatorIntl，并重写函数getRangeLabel。创建一个CustomMatPaginatorIntl只是编写一个从MatPaginatorIntl扩展的类

export class CustomMatPaginatorIntl extends MatPaginatorIntl {
  getRangeLabel=(page:number, pageSize:number, length:number)=>{
    return ''

  }
}

并用作提供者

providers:[{provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl}]

（如果您在组件中用作提供程序，则组件中的所有分页器均不显示任何内容，如果在模块中用作提供程序，则属于该模块的组件中的所有分页器均不显示任何内容）

注意。在功能中：

//the first showed page is: (1+page*pageSize)
//the last showed page is : (1+page)*pageSize
//the total page is:length
//so we can return some like
return (1+page*pageSize)+' - '+(1+page)*pageSize+' pág/'+(length)

Answer 3

在 mat-paginator [hidePageSize]="true" 中使用这个属性

<mat-paginator [hidePageSize]="true" .....rest properties.....>

隐藏MatPaginator详细信息

3 个答案: