Angular CDK 响应式布局工具

Angular CDK（Component Dev Kit）的 Layout 模块提供了一套响应式工具，用于处理多设备兼容的自适应布局。核心工具包括 BreakpointObserver 和预定义的断点常量，可监听屏幕尺寸变化并动态调整布局。

核心断点常量

Angular CDK 内置了以下标准断点常量（单位：px）：

• XSmall: 0 - 599
• Small: 600 - 959
• Medium: 960 - 1279
• Large: 1280 - 1919
• XLarge: 1920+

实现自适应布局

1. 注入 BreakpointObserver 在组件中注入服务并监听断点变化：

import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

constructor(private breakpointObserver: BreakpointObserver) {}

ngOnInit() {
  this.breakpointObserver.observe([
    Breakpoints.XSmall,
    Breakpoints.Small,
    Breakpoints.Medium
  ]).subscribe(result => {
    this.isMobile = result.matches;
  });
}

2. 响应式样式绑定 根据断点状态动态绑定CSS类：

<div [class.mobile-view]="isMobile" [class.desktop-view]="!isMobile">
  <!-- 内容 -->
</div>

3. 条件渲染 结合 *ngIf 或 ngSwitch 按设备类型渲染不同模板：

<ng-container *ngIf="breakpointObserver.isMatched(Breakpoints.Handset)">
  <mobile-nav></mobile-nav>
</ng-container>

高级用法

自定义断点 扩展默认断点配置：

const customBreakpoints = {
  Tablet: '(min-width: 768px) and (max-width: 1024px)',
  Desktop: '(min-width: 1025px)'
};

this.breakpointObserver.observe([
  customBreakpoints.Tablet
]).subscribe(/* ... */);

组合断点查询 使用逻辑运算符组合条件：

this.breakpointObserver.observe([
  '(orientation: portrait)',
  '(max-height: 720px)'
]).subscribe(/* ... */);

性能优化

• 避免在模板中频繁调用 BreakpointObserver.isMatched()
• 使用 debounceTime 处理高频分辨率变化
• 通过 async 管道管理订阅生命周期

响应式工具链集成

可结合以下工具增强效果：

• Flex Layout 库（@angular/flex-layout）
• CSS Grid 布局系统
• 自定义 Directive 封装响应式逻辑

通过合理使用 CDK 的响应式工具，可以构建从移动设备到桌面端的完整自适应布局方案。注意在销毁组件时取消订阅以避免内存泄漏。