如何为Angular Material MDC分页器设置formFieldAppearance属性

问题描述 #

基于Angular Material的设计系统迁移至MDC组件时，无法为<mat-paginator>设置fill外观。直接在组件上添加formFieldAppearance或appearance属性无效，但注意到MatPaginatorDefaultOptions包含该属性，不清楚如何应用。

解决方案 #

全局配置（所有分页器生效） #

通过provideMatPaginatorDefaultOptions提供全局默认配置，步骤如下：

1. 导入相关模块和类型：

import { MatPaginatorDefaultOptions, provideMatPaginatorDefaultOptions } from '@angular/material/paginator';

2. 定义分页器配置对象：

const paginatorDefaultOptions: MatPaginatorDefaultOptions = {
  formFieldAppearance: 'fill'
};

3. 在模块的providers数组中注册配置：

@NgModule({
  // 其他模块声明、导入项...
  providers: [
    provideMatPaginatorDefaultOptions(paginatorDefaultOptions)
  ]
})
export class AppModule { }

注意事项 #

• <mat-paginator>组件本身没有暴露formFieldAppearance输入属性，无法直接在模板中单独设置单个分页器的外观，全局配置是官方推荐的方式。
• 该方案适用于Angular Material 15版本，与演示环境版本匹配。

内容的提问来源于stack exchange，提问作者ineedtoknow