Angular CDK 概述

Angular Component Dev Kit (CDK) 是一组工具库，提供无样式交互模式的基础设施，帮助开发者快速构建高性能、可访问的组件。其响应式工具和布局模块（如 LayoutModule 和 BreakpointObserver）是实现自适应设计的核心。

响应式工具的核心模块

BreakpointObserver
监听浏览器视口变化，基于预定义的断点（如 xs、sm、md、lg、xl）触发响应式逻辑。典型断点值与 Material Design 一致：

• xs: 0-599px
• sm: 600-959px
• md: 960-1279px
• lg: 1280-1919px
• xl: ≥1920px

基础用法示例

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

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

自适应布局实现

1. 条件渲染
结合 *ngIf 或 NgClass 动态调整 DOM 结构：

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

2. 样式动态绑定
通过断点状态切换 CSS 类：

@HostBinding('class.mobile-mode') get mobileMode() {
  return this.breakpointObserver.isMatched(Breakpoints.HandsetPortrait);
}

3. 响应式数据流
使用 map 操作符转换断点状态：

import { map } from 'rxjs/operators';

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

高级技巧

自定义断点
扩展默认断点配置：

const customBreakpoints = {
  tablet: '(min-width: 768px) and (max-width: 1024px)'
};

this.breakpointObserver.observe([customBreakpoints.tablet])
  .subscribe(...);

性能优化

• 使用 debounceTime 减少频繁触发
• 通过 shareReplay() 复用观察结果

与其他工具集成

Angular Flex Layout
结合 FlexLayoutModule 实现更复杂的响应式网格：

<div fxLayout="row" fxLayout.xs="column">
  <div fxFlex="50%" fxFlex.xs="100%">自适应列</div>
</div>

注意事项

• 服务端渲染 (SSR) 需处理断点默认值
• 断点逻辑应与业务逻辑解耦
• 移动端优先设计可减少代码复杂度