Angular CDK 实用技巧：手把手构建响应式自适应布局-优快云博客

使用 Angular CDK 的 BreakpointObserver 实现响应式布局

Angular CDK 的 BreakpointObserver 可以监听浏览器视口变化，并根据预定义的断点（如 xs、sm、md、lg、xl）调整布局。

安装 Angular CDK
确保项目已安装 @angular/cdk：
```
ng add @angular/cdk
```

定义响应式断点
在组件中导入 BreakpointObserver 和 Breakpoints，并监听视口变化：

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

@Component({
  selector: 'app-responsive-layout',
  templateUrl: './responsive-layout.component.html',
})
export class ResponsiveLayoutComponent {
  isSmallScreen: boolean = false;

  constructor(private breakpointObserver: BreakpointObserver) {
    this.breakpointObserver.observe([Breakpoints.Small, Breakpoints.HandsetPortrait])
      .subscribe(result => {
        this.isSmallScreen = result.matches;
      });
  }
}

在模板中应用条件渲染
根据 isSmallScreen 动态调整布局：

<div *ngIf="isSmallScreen; else desktopLayout">
  <!-- 移动端布局 -->
  <mat-toolbar color="primary">移动端导航</mat-toolbar>
</div>
<ng-template #desktopLayout>
  <!-- 桌面端布局 -->
  <mat-sidenav-container>
    <mat-sidenav mode="side" opened>侧边栏</mat-sidenav>
    <mat-sidenav-content>主内容区</mat-sidenav-content>
  </mat-sidenav-container>
</ng-template>

利用 Angular CDK 的 LayoutModule 实现流式布局

LayoutModule 提供工具类，可根据设备尺寸动态调整样式。

导入 LayoutModule
在模块中导入 LayoutModule：

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

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

使用样式绑定
结合 BreakpointObserver 动态添加 CSS 类：

@Component({...})
export class ResponsiveLayoutComponent {
  getLayoutClass() {
    return {
      'mobile-layout': this.isSmallScreen,
      'desktop-layout': !this.isSmallScreen
    };
  }
}

<div [ngClass]="getLayoutClass()">
  <!-- 内容随屏幕尺寸变化 -->
</div>

CSS 示例
定义不同尺寸下的样式：

.mobile-layout {
  display: flex;
  flex-direction: column;
}
.desktop-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
}

结合 Angular Flex Layout 增强响应式能力

Angular Flex Layout 提供更灵活的响应式工具，可与 CDK 配合使用。

安装 Angular Flex Layout

npm install @angular/flex-layout @angular/cdk

使用响应式指令
在模板中直接应用响应式规则：

<div fxLayout="row" fxLayout.lt-md="column">
  <div fxFlex="50%" fxFlex.lt-sm="100%">左侧内容</div>
  <div fxFlex="50%" fxFlex.lt-sm="100%">右侧内容</div>
</div>

动态调整间距
使用 fxLayoutGap 根据屏幕尺寸调整间距：

<div fxLayout="row" fxLayoutGap="16px" fxLayoutGap.lt-sm="8px">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

使用 CDK 的 Drag and Drop 实现自适应列表

在响应式布局中，可通过拖放功能调整元素顺序。

导入 DragDropModule

import { DragDropModule } from '@angular/cdk/drag-drop';

创建可排序列表

<div cdkDropList (cdkDropListDropped)="drop($event)">
  <div *ngFor="let item of items" cdkDrag>{{ item }}</div>
</div>

处理拖放事件

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}

响应式表格与分页

结合 BreakpointObserver 调整表格列数和分页大小。

动态隐藏列

displayedColumns: string[] = ['name', 'email', 'actions'];

constructor(private breakpointObserver: BreakpointObserver) {
  this.breakpointObserver.observe([Breakpoints.XSmall])
    .subscribe(result => {
      this.displayedColumns = result.matches 
        ? ['name', 'actions'] 
        : ['name', 'email', 'actions'];
    });
}

调整分页大小

pageSizeOptions: number[] = [5, 10, 20];
pageSize: number = 10;

ngOnInit() {
  this.breakpointObserver.observe(Breakpoints.Handset)
    .subscribe(result => {
      this.pageSize = result.matches ? 5 : 10;
    });
}