angular-material

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

@angular/material & @angular/cdk

Version: 21.0.3 (Feb 2026) Tags: Material Design, CDK, Components, UI Library

References: Docs — components, guides • CDK Docs • GitHub Issues • Changelog

版本: 21.0.3（2026年2月） 标签: Material Design, CDK, Components, UI Library

参考链接: 官方文档 — 包含组件、使用指南 • CDK 文档 • GitHub Issues • 更新日志

API Changes

API 变更

This section documents recent version-specific API changes.

NEW: Angular Aria — New low-level component library for accessible, headless components that can be styled custom source
NEW: CDK overlays now use browser's built-in popovers for improved accessibility source
NEW: Material Design system tokens — Use utility classes to apply Material tokens directly in templates source
NEW: CDK Drag & Drop improvements — Allow copying items between lists source
NEW: Angular v21 — Full support for new Angular features including zoneless change detection

本节记录了近期特定版本的API变动：

新增：Angular Aria — 全新的底层组件库，用于构建可访问的无样式（headless）组件，支持自定义样式来源
新增：CDK 浮层现在使用浏览器原生弹出框实现，可访问性得到提升来源
新增：Material Design 系统令牌 — 可在模板中直接使用工具类应用Material令牌来源
新增：CDK 拖拽功能优化 — 支持在不同列表之间复制元素来源
新增：Angular v21 — 全面支持Angular新特性，包括无Zone变更检测

Best Practices

最佳实践

Use standalone components — Import Material components directly without 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 {}

Use CDK for custom components — Use CDK (Component Dev Kit) for behavior primitives like drag-drop, overlays, menus without Material styling
Use CDK Virtual Scroll for large lists — Improve performance with
```
cdkVirtualScrollViewport
```
instead of rendering all items

html

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

Use
```
trackBy
```
with
```
ngFor
```
— Prevent unnecessary DOM re-renders
Customize themes with SCSS — Use Material's theming system for custom colors and typography
Use
```
ChangeDetectionStrategy.OnPush
```
— Improve performance with default change detection strategy
Follow accessibility guidelines — Use ARIA labels, keyboard navigation, and focus management provided by CDK components

使用独立组件 — 无需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
```
代替渲染所有元素，提升性能

html

<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标签、键盘导航和焦点管理能力