用途
Angular Material 与 Angular CDK 用于在 Angular 应用中构建符合 Material Design 规范的界面。@angular/material 提供现成的 UI 组件，@angular/cdk（Component Dev Kit）提供拖放、覆盖层、菜单等行为原语，可在不带 Material 样式的情况下复用。该技能在涉及 Angular Material 组件、CDK 或 Material Design 时使用。
版本与参考
版本：21.0.3（2026 年 2 月）。标签：Material Design、CDK、Components、UI Library。参考资料包括组件与指南文档、CDK 文档、GitHub Issues 与 Changelog。
API 变更
- 新增 Angular Aria：面向无障碍、无头（headless）组件的底层组件库，可自定义样式。
- 新增：CDK 覆盖层（overlays）改用浏览器内置 popover，以提升无障碍性。
- 新增：Material Design 系统令牌（system tokens），可通过工具类在模板中直接应用 Material 令牌。
- 新增：CDK 拖放（Drag & Drop）改进，支持在列表之间复制条目。
- 新增：Angular v21 全面支持新特性，包括无 Zone（zoneless）变更检测。
最佳实践
- 使用独立组件（standalone components）：直接导入 Material 组件，无需 NgModule。示例：
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：需要拖放、覆盖层、菜单等行为原语但不带 Material 样式时，使用 CDK。
- 大列表使用 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 标签、键盘导航与焦点管理。
适用场景
适用于 Angular 项目中构建 Material Design 界面、复用 CDK 行为原语、处理大列表性能、定制主题以及实现无障碍交互等场景。
限制
资料未提供安装命令、收费与价格信息、具体平台支持范围及效果数据，暂未提供。