mat-paginator 更改 mat-paginator-range-label 的放置

我有一个简单的mat-table with mat-paginator.

By default design it looks like this:

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

基本上，我需要移动div.mat-paginator-range-label容器顶部的一个元素button.mat-paginator-navigation-previous and button.mat-paginator-navigation-next.

知道如何做吗？ 谢谢。

实际上，因为“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;
    }
}

如果您使用基于 MDC 的组件，那么您需要添加mdc到班级如下。

  // override material paginator
  .mat-mdc-paginator-outer-container {
    .mat-mdc-paginator-container {
      justify-content: center;
    }

    // override material paginator page switch
    .mat-mdc-paginator-range-label {
      order: 2;
    }

    .mat-mdc-paginator-navigation-previous {
      order: 1;
    }

    .mat-mdc-paginator-navigation-next {
      order: 3;
    }
  }