什么是 Angular CDK 响应式工具

Angular CDK（Component Dev Kit）提供了一套响应式工具，用于简化自适应布局的开发。这些工具基于 CSS 媒体查询，但以声明式的方式集成到 Angular 应用中，便于动态响应屏幕尺寸变化。核心功能包括断点观察、布局调整和组件行为适配。

核心模块与功能

@angular/cdk/layout 是响应式工具的核心模块，主要包含以下功能：

• BreakpointObserver：监听屏幕尺寸变化，匹配预设断点。
• Breakpoints：提供常见断点常量（如 Handset、Tablet、Web）。
• MediaMatcher：底层媒体查询的封装，支持自定义查询。

基本用法示例

安装 CDK 后，在模块中导入布局模块：

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

注入服务并监听断点：

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

自定义断点配置

除了预设断点，可以定义自定义媒体查询：

const customQuery = '(min-width: 1024px) and (max-width: 1280px)';
this.breakpointObserver.observe(customQuery)
  .subscribe(result => {
    this.isCustomSize = result.matches;
  });

响应式布局实践

结合 *ngIf 或 ngClass 动态调整 UI：

<div [class.handset]="isHandset$ | async">内容区域</div>

使用 async 管道简化订阅管理：

isHandset$ = this.breakpointObserver.observe(Breakpoints.Handset)
  .pipe(map(result => result.matches));

性能优化建议

• 避免过度订阅：在组件销毁时取消订阅，或使用 async 管道。
• 合并查询：单次调用 observe() 监听多个断点比多次调用更高效。
• 防抖处理：对高频事件（如窗口缩放）添加防抖逻辑。

与其他工具整合

可与 Flex Layout 库配合使用，实现更复杂的响应式网格：

<div fxLayout="row" fxLayout.xs="column">
  <div fxFlex="50%" fxFlex.xs="100%">左侧</div>
  <div fxFlex="50%" fxFlex.xs="100%">右侧</div>
</div>

常见问题解决

白屏问题：检查是否在根组件完成初始化前调用了断点观察。解决方案是延迟初始化或在 ngAfterViewInit 中启动观察。

SSR 兼容性：服务端渲染时媒体查询无效。可通过注入 PLATFORM_ID 区分环境：

import { isPlatformBrowser } from '@angular/common';

constructor(
  @Inject(PLATFORM_ID) private platformId: Object,
  private breakpointObserver: BreakpointObserver
) {
  if (isPlatformBrowser(this.platformId)) {
    // 仅客户端执行断点观察
  }
}