Angular CDK 响应式工具与自适应布局实战

BreakpointObserver 基础使用

Angular CDK 的 BreakpointObserver 用于监听浏览器视口变化，根据预设的断点触发响应式逻辑。常用断点包括：

• xs (0px - 599px)
• sm (600px - 959px)
• md (960px - 1279px)
• lg (1280px - 1919px)
• xl (1920px+)

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

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

自定义断点配置

通过 LayoutModule 的提供者可以覆盖默认断点：

providers: [
  {
    provide: BREAKPOINTS,
    useValue: [
      { alias: 'xs', mediaQuery: '(min-width: 0px) and (max-width: 575px)' },
      { alias: 'sm', mediaQuery: '(min-width: 576px)' }
    ]
  }
]

响应式样式绑定

结合 ngClass 或 ngStyle 实现动态样式：

<div [ngClass]="{
  'mobile-view': isHandset,
  'desktop-view': !isHandset
}">
  <!-- 内容 -->
</div>

自适应布局组件

使用 LayoutModule 的指令快速构建响应式布局：

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

媒体查询服务

创建可复用的媒体查询服务：

@Injectable()
export class ResponsiveService {
  private breakpoints = {
    handset: '(max-width: 599px)',
    tablet: '(min-width: 600px) and (max-width: 1279px)'
  };

  constructor(private breakpointObserver: BreakpointObserver) {}

  getMatches() {
    return this.breakpointObserver.observe([
      this.breakpoints.handset,
      this.breakpoints.tablet
    ]);
  }
}

性能优化技巧

避免频繁触发变更检测，使用 debounceTime 控制触发频率：

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

服务端渲染(SSR)兼容

在 AppModule 中注入 ViewportRuler 确保 SSR 兼容：

providers: [
  { provide: ViewportRuler, useClass: ViewportRuler }
]

复杂布局示例

结合 @angular/flex-layout 实现高级响应式网格：

<div fxLayout="row wrap" fxLayoutGap="16px">
  <div fxFlex="100%" fxFlex.gt-sm="50%" fxFlex.gt-md="33%"
       *ngFor="let item of items">
    {{ item }}
  </div>
</div>