Angular CDK 响应式工具指南：从基础到自适应布局应用

Angular CDK 响应式工具简介

Angular CDK（Component Dev Kit）提供 @angular/cdk/layout 模块，用于处理响应式布局逻辑。它基于媒体查询（Media Queries）和观察者模式，简化屏幕尺寸变化时的动态适配。

核心功能与 API

BreakpointObserver

监听屏幕尺寸变化，支持预定义的断点或自定义断点：

预定义断点：XSmall（max-width: 599px）、Small（600px-959px）、Medium（960px-1279px）、Large（1280px-1919px）、XLarge（min-width: 1920px）。
方法：
- observe(breakpoints: string[]): 返回 Observable<BreakpointState>。
- isMatched(breakpoint: string): 返回布尔值，判断当前是否匹配断点。

LayoutModule

需在模块中导入：

typescript 复制代码

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

@NgModule({
  imports: [LayoutModule]
})

基础用法示例

监听断点变化

typescript 复制代码

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

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

条件渲染模板

html 复制代码

<div *ngIf="isHandset" class="mobile-view">
  移动端布局
</div>
<div *ngIf="!isHandset" class="desktop-view">
  桌面端布局
</div>

自适应布局实战

动态调整侧边栏

使用 BreakpointObserver 控制侧边栏的显隐：

typescript 复制代码

this.breakpointObserver.observe([Breakpoints.XSmall])
  .subscribe(result => {
    this.sidenavMode = result.matches ? 'over' : 'side';
    this.sidenavOpened = !result.matches;
  });

模板中绑定模式：

html 复制代码

<mat-sidenav [mode]="sidenavMode" [opened]="sidenavOpened"></mat-sidenav>

自定义断点

通过字符串定义自定义断点：

typescript 复制代码

const customBreakpoint = '(min-width: 768px) and (max-width: 1024px)';
this.breakpointObserver.observe([customBreakpoint])
  .subscribe(result => {
    this.isTablet = result.matches;
  });

性能优化建议

取消订阅：在组件销毁时取消监听，避免内存泄漏。

typescript 复制代码

private subscription = this.breakpointObserver.observe(...).subscribe(...);

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

防抖处理：高频场景下可使用 debounceTime 减少触发频率。

常见问题

断点不生效

检查是否在模块中导入 LayoutModule，并确认断点字符串格式正确（如括号匹配）。

服务端渲染（SSR）

在服务端环境中，BreakpointObserver 可能无法获取实际窗口尺寸。可通过注入 PLATFORM_ID 区分环境：

typescript 复制代码

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

constructor(
  @Inject(PLATFORM_ID) private platformId: Object,
  private breakpointObserver: BreakpointObserver
) {
  if (isPlatformBrowser(this.platformId)) {
    // 仅在浏览器端监听
  }
}