Angular CDK 响应式工具基础

Angular CDK（Component Dev Kit）提供了一套响应式工具，用于处理自适应布局和屏幕尺寸变化。这些工具基于 @angular/cdk/layout 模块，能够轻松实现响应式设计。

安装与导入
确保已安装 @angular/cdk，并在模块中导入 LayoutModule：

import { LayoutModule } from '@angular/cdk/layout';
@NgModule({
  imports: [LayoutModule],
})
export class AppModule {}

核心工具 BreakpointObserver

BreakpointObserver 是 CDK 响应式工具的核心，用于监听屏幕断点变化。预定义断点包括：

• Handset（手机设备）
• Tablet（平板设备）
• Web（桌面设备）
• 其他标准断点（如 xs、sm、md、lg、xl）。

监听断点变化
在组件中使用 BreakpointObserver 监听屏幕尺寸变化：

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

constructor(private breakpointObserver: BreakpointObserver) {
  this.breakpointObserver.observe([
    Breakpoints.Handset,
    Breakpoints.Tablet,
    Breakpoints.Web,
  ]).subscribe(result => {
    if (result.matches) {
      // 根据断点执行逻辑
    }
  });
}

响应式布局示例

条件渲染
根据屏幕尺寸动态显示不同内容：

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

在模板中使用 async 管道：

<div *ngIf="isHandset$ | async">移动端内容</div>
<div *ngIf="!(isHandset$ | async)">桌面端内容</div>

样式调整
通过断点动态调整样式类：

getLayoutClass(): string {
  return this.breakpointObserver.isMatched(Breakpoints.Handset) 
    ? 'mobile-layout' 
    : 'desktop-layout';
}

自定义断点

支持自定义断点规则：

const CustomBreakpoints = {
  Small: '(max-width: 599px)',
  Medium: '(min-width: 600px) and (max-width: 1023px)',
  Large: '(min-width: 1024px)',
};

this.breakpointObserver.observe([
  CustomBreakpoints.Small,
  CustomBreakpoints.Medium,
]).subscribe(/* 处理逻辑 */);

性能优化

避免频繁订阅导致性能问题，建议：

• 使用 debounceTime 或 throttleTime 限制触发频率。
• 在组件销毁时取消订阅（unsubscribe）。

最佳实践

1. 模块化设计：将响应式逻辑封装为可复用服务。
2. 移动优先：优先处理小屏幕布局，再扩展到大屏幕。
3. 测试覆盖：使用 MockBreakpointObserver 进行单元测试。

通过以上方法，可以高效实现 Angular 应用的响应式布局。