隐藏 MatPaginator 详细信息

Question

>我试图隐藏 MatPaginator 自动添加的字符串(每页项目数：1 1 – 1 of 2(，我尝试通过将display:none;或display:none !important;设置为容器类来执行 CSS 方式，但这不起作用：

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

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

Answer 1

此属性的正确用法是：

<mat-paginator hidePageSize="true">

原因是您不必使用带有布尔值的括号。如果不初始化 TS 文件中的布尔值，可能会导致表达式更改后它已被检查错误，即在更改检测完成后更改了表达式值。因此，如果您决定使用带括号的此属性，请尝试以下操作：

isHidePageSize: boolean = true;
<pre>
<mat-paginator [hidePageSize]="isHidePageSize">
</pre>

对于具有布尔值的任何其他属性也是如此。

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

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

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

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

请注意，对于 Angular 15 或更高版本，类名已更新为以下内容：.mat-mdc-paginator-range-label和mat-mdc-paginator-page-size。请参阅：https://material.angular.io/guide/mdc-migration#library-wide-changes

将 ：：ng-deep 伪类完全应用于任何 CSS 规则 禁用该规则的视图封装。任何带有 ：：ng-deep 的样式 应用成为全局样式。为了限定指定样式的范围 对于当前组件及其所有后代，请确保包含 ：：ng-deep 之前的 ：host 选择器。如果 ：：ng-deep 组合子是 在没有 ：host 伪类选择器的情况下使用，样式可能会渗入 其他组件。

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

Answer 4

在 mat-paginator [hidePageSize]="true" 中使用此属性，例如

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