如何自定义 mat-paginator 下拉位置？

Question

我在组件内部使用了材料<mat-paginator>，并根据需要调整其位置，以便选项列表位于所选选项的下方。这是我需要实现的目标：

然而，mat-options 的默认位置是这样的：

检查 DOM 树我可以在 <mat-paginator> 中找到 <mat-select>。 <mat-option> 列表的呈现方式似乎几乎相同，它托管在 DIV 节点内，具有 cdk-overlay-pane 类。

虽然<mat-select> API 允许我提供panelClass 属性以便将其他CSS 类应用到下拉面板，但<mat-paginator> 不能。另外，我不能使用::ng-deep，因为我只想定位这个下拉列表而不覆盖其他下拉列表。

这里是 StackBlitz demo，带有 mat-paginator。

Answer 1

只需使用MAT_SELECT_CONFIG 注入令牌在所需级别（组件、模块或根）将disableOptionCentering 设置为true 提供MatSelectConfig 服务。