Angular mat paginator更改mat paginator范围标签的放置

我有一个简单的

mat表

，带有

mat分页器

默认情况下，它的设计如下所示：

我想更改范围标签的位置，并将其放在导航按钮之间，如下所示：

@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'));
    }

基本上，我需要将

div.mat-paginator-range-label

元素从此容器顶部移动到

按钮之间。mat paginator navigation previous

和

按钮之间。mat paginator navigation next

你知道怎么做吗？

---

谢谢。

好的，我为如何做到这一点创建了一个解决方案。 我使用

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.\u renderer

是

Renderer2

的一个实例，也是带有

ViewChild

装饰器的

HTML

代码

<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

如果有人知道更好的解决方法，请告诉我。 否则，我希望我的回答能帮助你完成类似的任务。 感谢

事实上，因为“mat paginator容器”使用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;
    }
}

---

谢谢非常好的解决方案。