Angular CDK 响应式工具的核心功能

Angular CDK（Component Dev Kit）提供Layout模块，专门用于响应式布局设计。核心工具包括BreakpointObserver服务和预定义断点常量（如Breakpoints.Handset），可监听屏幕尺寸变化并动态调整布局。

监听断点变化的实现方法

注入BreakpointObserver服务，通过observe()方法订阅断点变化。例如监听移动设备横竖屏状态：

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

constructor(private breakpointObserver: BreakpointObserver) {
  this.breakpointObserver.observe([Breakpoints.HandsetPortrait])
    .subscribe(result => {
      this.isMobile = result.matches;
    });
}

动态样式绑定的技巧

结合ngClass或ngStyle实现条件样式。当检测到小屏幕时切换CSS类：

<div [ngClass]="{'compact-view': isMobile}">...</div>

对应的CSS定义不同断点的样式：

.compact-view { padding: 8px; }
@media (min-width: 600px) { .compact-view { padding: 16px; } }

响应式数据流处理

使用map操作符转换断点观察结果，生成适用于不同屏幕的配置数据：

columns$ = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
  map(result => result.matches ? 2 : 4)
);

在模板中通过async管道消费：

<grid-layout [columns]="columns$ | async"></grid-layout>

性能优化策略

避免频繁的DOM操作，推荐采用纯CSS方案处理简单响应式需求。对于复杂逻辑，使用debounceTime减少触发频率：

this.breakpointObserver.observe([Breakpoints.Handset])
  .pipe(debounceTime(300))
  .subscribe(/*...*/);

多断点联合查询

组合多个断点进行复杂条件判断，例如检测平板设备：

const isTablet = this.breakpointObserver.isMatched(
  [Breakpoints.TabletPortrait, Breakpoints.TabletLandscape]
);