我有一个简单的mat-table
和mat-paginator
。
我想更改范围标签的位置并将其放置在导航按钮之间,如下所示:
基本上,我需要将div.mat-paginator-range-label
元素从此容器的顶部移至button.mat-paginator-navigation-previous
和button.mat-paginator-navigation-next
之间。
有什么想法吗? 谢谢。
答案 0 :(得分:1)
实际上,因为“ mat-paginator-container”使用flexbox,所以只需使用自定义CSS代码即可轻松修改所有组件的默认位置。例如对于我来说:
// override material paginator
::ng-deep .mat-paginator {
.mat-paginator-container {
justify-content: center;
}
// override material paginator page switch
.mat-paginator-range-label {
order: 2;
}
.mat-paginator-navigation-previous {
order: 1;
}
.mat-paginator-navigation-next {
order: 3;
}
}
答案 1 :(得分:0)
好的,我创建了一个解决方案。
我使用Renderer2
来对DOM
进行操作,它看起来像这样:
@ViewChild("paginator", {read: ElementRef}) paginator: ElementRef;
ngAfterViewInit(): void {
this._renderer.insertBefore(
this.paginator.nativeElement.querySelector('.mat-paginator-navigation-next.mat-icon-button').parentNode,
this.paginator.nativeElement.querySelector('.mat-paginator-range-label'),
this.paginator.nativeElement.querySelector('.mat-paginator-navigation-next.mat-icon-button'));
}
在我的情况下,this._renderer
是Renderer2
的实例,并且是带有HTML
装饰器的ViewChild
代码。
<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
如果有人知道更好的解决方案,请告诉我。 否则,我希望我的回答可以帮助您完成类似的任务。 谢谢
答案 2 :(得分:0)
塔拉斯,谢谢您的回答!这就是我真正需要的! 我已按照您的建议实施,并得到了这样的结果: