使用 Angular CDK Breakpoints 定义响应断点

Angular CDK 提供 Breakpoints 对象，内置常见响应式断点（如 XSmall、Small、Medium、Large）。通过 BreakpointObserver 监听断点变化：

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

constructor(private breakpointObserver: BreakpointObserver) {
  this.breakpointObserver.observe([
    Breakpoints.XSmall,
    Breakpoints.Small,
    Breakpoints.Medium,
    Breakpoints.Large
  ]).subscribe(result => {
    this.isMobile = result.matches;
  });
}

结合 LayoutModule 实现动态布局切换

LayoutModule 提供 FlexLayoutModule 的替代方案，通过指令动态调整布局结构。在模板中使用 fxLayout 和 fxLayoutAlign 结合 CDK 状态：

<div [fxLayout]="isMobile ? 'column' : 'row'" fxLayoutGap="16px">
  <div fxFlex="30%" *ngIf="!isMobile">侧边栏</div>
  <div fxFlex="70%">主内容区</div>
</div>

响应式数据流处理

使用 map 和 distinctUntilChanged 优化断点观察的性能，避免不必要的变更检测：

import { map, distinctUntilChanged } from 'rxjs/operators';

breakpointObserver.observe([Breakpoints.XSmall])
  .pipe(
    map(result => result.matches),
    distinctUntilChanged()
  )
  .subscribe(isXSmall => {
    this.columns = isXSmall ? 1 : 3;
  });

自定义断点配置

扩展默认断点配置，支持特定业务场景的响应式需求：

const customBreakpoints = {
  tablet: '(min-width: 600px) and (max-width: 959px)',
  desktop: '(min-width: 960px)'
};

this.breakpointObserver.observe([
  customBreakpoints.tablet,
  customBreakpoints.desktop
]).subscribe(/* 处理逻辑 */);

性能优化策略

通过 debounceTime 防止频繁布局重排，特别是在窗口大小连续变化时：

import { debounceTime } from 'rxjs/operators';

breakpointObserver.observe([Breakpoints.Handset])
  .pipe(
    debounceTime(300),
    map(result => result.matches)
  )
  .subscribe(/* 更新状态 */);

服务化封装模式

将响应式逻辑封装为可复用的服务，统一管理业务组件的布局状态：

@Injectable()
export class LayoutService {
  private mobile$ = this.breakpointObserver.observe(Breakpoints.Handset);

  isMobile$ = this.mobile$.pipe(
    map(result => result.matches),
    distinctUntilChanged()
  );
}