Angular CDK 响应式工具简介

Angular CDK（Component Dev Kit）提供了一套响应式工具（@angular/cdk/layout），用于处理屏幕尺寸变化、设备方向切换等场景。这些工具基于媒体查询（Media Queries）和观察者模式（Observable），可轻松实现自适应布局。

核心功能模块

1. BreakpointObserver
   监听屏幕断点变化（如 xs, sm, md, lg, xl），触发回调或返回 Observable 数据流。
   内置断点与常见 CSS 框架（如 Bootstrap、Material Design）兼容。

2. MediaMatcher
   直接访问原生 window.matchMedia API 的封装，适合需要自定义媒体查询的场景。

基础用法示例

监听屏幕断点变化

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

constructor(private breakpointObserver: BreakpointObserver) {
  this.breakpointObserver.observe([
    Breakpoints.Handset,  // 手机竖屏
    Breakpoints.Tablet    // 平板
  ]).subscribe(result => {
    this.isMobile = result.matches;
  });
}

自定义媒体查询

import { MediaMatcher } from '@angular/cdk/layout';

constructor(private mediaMatcher: MediaMatcher) {
  const customQuery = '(min-width: 1024px)';
  this.media = this.mediaMatcher.matchMedia(customQuery);
  this.media.addListener(this.handleMediaChange);
}

handleMediaChange(event: MediaQueryListEvent) {
  console.log('屏幕尺寸变化:', event.matches);
}

高级技巧

响应式样式绑定

通过 BreakpointObserver 动态切换 CSS 类：

this.breakpointObserver.observe(Breakpoints.Handset).subscribe(result => {
  this.renderer.addClass(this.elementRef.nativeElement, 'mobile-mode');
});

懒加载组件

结合 *ngIf 和断点观察，实现按需加载：

<app-heavy-component *ngIf="!(isMobile$ | async)"></app-heavy-component>
<app-light-component *ngIf="isMobile$ | async"></app-light-component>

常见问题与优化

1. 性能优化
   避免频繁订阅/取消订阅，使用 async 管道自动管理生命周期。

2. 服务端渲染（SSR）兼容性
   在 NgZone 外调用 BreakpointObserver，避免 SSR 报错。

3. 断点扩展
   自定义断点配置：

   const customBreakpoints = {
     SuperLarge: '1920px',
     UltraWide: '2560px'
   };
   

总结

Angular CDK 响应式工具通过声明式 API 简化了自适应布局开发，结合 RxJS 可实现高效的状态管理。实际项目中建议优先使用 BreakpointObserver，复杂场景再考虑 MediaMatcher。