mat-paginator 改变 mat-paginator-range-label 的位置答案

【问题标题】：mat-paginator change the placing of mat-paginator-range-labelmat-paginator 改变 mat-paginator-range-label 的位置
【发布时间】：2019-07-08 06:02:27
【问题描述】：

我有一个简单的mat-table 和mat-paginator。

默认设计如下：

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

基本上，我需要在button.mat-paginator-navigation-previous 和button.mat-paginator-navigation-next 之间移动容器顶部的div.mat-paginator-range-label 元素。

知道怎么做吗？谢谢。

【问题讨论】：

标签： angular pagination angular-material angular-material2

【解决方案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;
    }
}

【讨论】：

谢谢！非常好的解决方案。

【解决方案2】：

好的，我创建了一个解决方案。我使用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 的一个实例，也是带有ViewChild 装饰器的HTML 代码。

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

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

【讨论】：