angular-material

@angular/material & @angular/cdk

版本： 21.0.3（2026 年 2 月） 标签： Material Design、CDK、组件、UI 库

参考资料： 文档 — 组件、指南 • CDK 文档 • GitHub Issues • 更新日志

API 变更

本节记录特定版本近期的 API 变更。

• 新增：Angular Aria — 用于构建可自定义样式的无障碍无头组件的新低层组件库 来源

• 新增：CDK 覆盖层现在使用浏览器内置的弹出层功能，以提升无障碍性 来源

• 新增：Material Design 系统令牌 — 使用实用工具类在模板中直接应用 Material 令牌 来源

• 新增：CDK 拖放改进 — 支持在列表之间复制项目 来源

• 新增：Angular v21 — 全面支持 Angular 新功能，包括无 Zone 变更检测

最佳实践

• 使用独立组件 — 无需 NgModule，直接导入 Material 组件

import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

@Component({
  standalone: true,
  imports: [MatButtonModule, MatCardModule],
  // ...
})
export class ExampleComponent {}

• 使用 CDK 构建自定义组件 — 使用 CDK（Component Dev Kit）提供的行为原语（如拖放、覆盖层、菜单），而不使用 Material 样式

• 对大型列表使用 CDK 虚拟滚动 — 使用 cdkVirtualScrollViewport，而不是渲染所有项目，以提升性能

<cdk-virtual-scroll-viewport itemSize="50" class="viewport">
  <div *cdkVirtualFor="let item of items">{{item.name}}</div>
</cdk-virtual-scroll-viewport>

• 在 ngFor 中使用 trackBy — 避免不必要的 DOM 重新渲染

• 使用 SCSS 自定义主题 — 使用 Material 的主题系统自定义颜色和字体排版

• 使用 ChangeDetectionStrategy.OnPush — 采用默认变更检测策略以提升性能

• 遵循无障碍指南 — 使用 CDK 组件提供的 ARIA 标签、键盘导航和焦点管理