Angular CDK 响应式工具简介

Angular CDK（Component Dev Kit）提供 LayoutModule 和 BreakpointObserver 工具，用于监听视口尺寸变化并动态调整布局。核心功能包括：

• 监听预设断点（如 xs, sm, md, lg, xl）。
• 自定义断点规则匹配视口宽度。
• 结合 Angular 模板指令快速切换 UI 状态。

安装与基础配置

在项目中安装 Angular CDK：

ng add @angular/cdk

导入模块到 AppModule：

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

@NgModule({
  imports: [LayoutModule]
})
export class AppModule {}

监听断点变化

通过 BreakpointObserver 监听视口变化并触发逻辑：

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

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

自适应布局实现

结合 *ngIf 或 NgClass 动态调整模板：

<div *ngIf="isMobile; else desktopView">
  移动端布局内容
</div>
<ng-template #desktopView>
  桌面端布局内容
</ng-template>

使用 NgClass 动态样式：

<div [ngClass]="{ 'compact-mode': isMobile }">
  根据屏幕切换样式
</div>

自定义断点规则

扩展默认断点以满足特定需求：

const customBreakpoints = {
  small: '(max-width: 599px)',
  medium: '(min-width: 600px) and (max-width: 1279px)',
  large: '(min-width: 1280px)'
};

breakpointObserver.observe([
  customBreakpoints.small
]).subscribe(result => {
  this.isSmallScreen = result.matches;
});

响应式栅格系统

结合 GridModule 实现动态列数调整：

import { GridModule } from '@angular/cdk/grid';

@Component({
  template: `
    <cdk-grid [cols]="isMobile ? 2 : 4">
      <div *cdkGridItems="let item of items">{{ item }}</div>
    </cdk-grid>
  `
})

性能优化

避免频繁触发变更检测：

• 使用 debounceTime 延迟处理断点变化。
• 在 OnDestroy 生命周期中取消订阅：

private subscription: Subscription;

ngOnInit() {
  this.subscription = this.breakpointObserver.observe(...).subscribe(...);
}

ngOnDestroy() {
  this.subscription.unsubscribe();
}

常见问题排查

• 断点未触发：检查 CSS 单位是否正确（如 px vs em）。
• 内存泄漏：确保取消订阅观察者。
• 服务端渲染（SSR）：使用 isPlatformBrowser 避免服务端报错。