Angular Material v20 是 Angular 20+ 应用的官方 Material Design 组件库，提供带主题支持和无障碍特性的预构建 UI 组件。
用途 适用于在 Angular 应用中实现 Material Design 组件、设置或自定义 Material 主题、使用表单控件（输入框、选择框、复选框、日期选择器等）、创建导航组件（工具栏、侧边栏、菜单、标签页）、构建卡片/展开面板/步骤条等布局、以表格展示带排序与分页的数据、显示对话框/提示条/工具提示/底部面板、确保 WCAG 无障碍合规，以及优化 Material 组件性能。
安装 使用 ng add @angular/material 进行自动设置。必须同时安装 @angular/material@~20.0.0 和 @angular/cdk@~20.0.0。
组件导入 导入具体的组件模块（如 MatDialogModule、MatFormFieldModule）。对独立组件使用显式的 imports 数组。绝不要导入整个 Material 库。
主题 使用 @use '@angular/material' as mat; 语法。在主题定义之前包含 mat.core()。使用 mat.define-light-theme() 或 mat.define-dark-theme() 定义主题。包含 mat.all-component-themes($theme) 以应用主题。
表单字段 将 matInput 元素包裹在 <mat-form-field> 中。使用 appearance 属性：outline、fill 或 standard。为无障碍添加 <mat-label>。当字段无效且已被触摸时，用 <mat-error> 显示错误。
对话框使用 注入 MatDialog 服务。使用 dialog.open(Component, config) 打开对话框。使用 width、data 等选项配置对话框。通过 MAT_DIALOG_DATA 注入令牌访问对话框数据。
无障碍 所有组件遵循 ARIA 指南。当文本内容不可见时包含 aria-labels。确保所有交互元素支持键盘导航。
变更检测 使用 OnPush 变更检测策略。利用 signals 进行响应式状态管理。
性能 尽可能懒加载 Material 模块。仅导入所需的组件模块。对大型列表使用虚拟滚动，配合 cdk-virtual-scroll-viewport。
核心组件 表单控件：MatInput（文本输入框）、MatSelect（下拉选择）、MatCheckbox（复选框）、MatRadioButton（单选按钮组）、MatSlideToggle（开关）、MatSlider（滑块）、MatDatepicker（日期选择）。 导航：MatToolbar（顶部导航栏）、MatSidenav（侧边导航抽屉）、MatMenu（下拉菜单）、MatTabs（标签页导航）。 布局：MatCard（卡片容器）、MatDivider（视觉分隔符）、MatExpansionPanel（可折叠面板）、MatGridList（网格布局）、MatList（列表显示）、MatStepper（分步工作流）。 按钮与指示器：MatButton（按钮变体）、MatButtonToggle（切换按钮组）、MatBadge（通知徽章）、MatChip（芯片元素）、MatIcon（图标显示）、MatProgressBar（线性进度）、MatProgressSpinner（环形进度）。 弹出与模态：MatDialog（模态对话框）、MatSnackBar（提示条通知）、MatTooltip（悬停工具提示）、MatBottomSheet（底部面板模态）。 数据表格：MatTable（数据表格显示）、MatSort（列排序）、MatPaginator（表格分页）。
主题示例 // styles.scss @use '@angular/material' as mat;
@include mat.core();
$my-primary: mat.define-palette(mat.$indigo-palette); $my-accent: mat.define-palette(mat.$pink-palette); $my-warn: mat.define-palette(mat.$red-palette);
$my-theme: mat.define-light-theme(( color: ( primary: $my-primary, accent: $my-accent, warn: $my-warn, ) ));
@include mat.all-component-themes($my-theme);
对话框示例 import { Component, inject } from '@angular/core'; import { MatDialog, MatDialogModule } from '@angular/material/dialog';
@Component({
selector: 'app-example',
standalone: true,
imports: [MatDialogModule],
template: <button mat-raised-button (click)="openDialog()"> Open Dialog </button>
})
export class ExampleComponent {
dialog = inject(MatDialog);
openDialog() { this.dialog.open(MyDialogComponent, { width: '400px', data: { name: 'Example' } }); } }
表单字段示例 import { Component } from '@angular/core'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-form',
standalone: true,
imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule],
template: <mat-form-field appearance="outline"> <mat-label>Email</mat-label> <input matInput [formControl]="email" /> <mat-error *ngIf="email.hasError('required')"> Email is required </mat-error> </mat-form-field>
})
export class FormComponent {
email = new FormControl('', Validators.required);
}
最佳实践 导入模块：导入具体组件模块以获得更好的 tree-shaking。使用主题：利用 Material 的主题系统实现一致的样式。无障碍：遵循 ARIA 指南并确保键盘导航。OnPush：配合 signals 使用 OnPush 变更检测以获得更好性能。懒加载：尽可能懒加载 Material 模块以减小初始包体积。
参考资料 Material Design Guidelines、Angular Material Docs、Component API。