Angular Flex Layout与Angular Material Grid List动态布局问题

我看了你遇到的问题：想结合Angular Material网格列表的行列控制能力，和Flex Layout的多设备适配灵活性，但绑定函数到[fxLayout]和[fxLayout.xs]后，窗口缩小时移动端布局没触发，对吧？

问题出在哪？ #

1. 函数绑定不响应窗口变化：直接把函数绑到fxLayout指令上，Angular的变更检测不会因为窗口resize自动重新执行这个函数，所以断点切换时布局不会更新。
2. 断点指令的逻辑冲突：fxLayout.xs这类断点指令本身是靠媒体查询触发的，但你用函数返回值绑定的方式，没法让它在断点切换时重新计算结果。
3. 另外你的updateLayout函数不管桌面还是移动端都返回column，逻辑上也没区分开不同设备的布局需求哦。

给你一套可行的解决方案 #

我们用Angular官方推荐的BreakpointObserver服务来监听断点变化，这样就能精准响应窗口大小切换，动态更新布局和网格项的colspan。

第一步：重构组件逻辑 #

先把原来的函数换成断点监听，代码如下：

import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

export class TopicsComponent implements OnInit {
  topics = [
    { 
      title: 'Example', 
      colspan: 2, 
      colspanalt: 7, 
      rowspan: 1, 
      color: '#ffa726', 
      font: '#607d8b', 
      order: '1' 
    }
  ];
  
  // 用Observable存储是否处于移动端的状态
  isMobile$: Observable<boolean>;

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    // 监听xs断点（也就是移动端）的变化
    this.isMobile$ = this.breakpointObserver.observe(Breakpoints.XSmall)
      .pipe(
        map(result => result.matches)
      );
  }

  // 根据设备状态返回对应的colspan
  getColspan(topic: any, isMobile: boolean): number {
    return isMobile ? topic.colspanalt : topic.colspan;
  }
}

第二步：更新模板代码 #

用async管道订阅isMobile$，这样就能自动响应断点变化，同时优化模板避免重复订阅：

<!-- 用ngIf把isMobile的值存起来，减少重复订阅 -->
<mat-card 
  *ngIf="isMobile$ | async as isMobile"
  <!-- 这里可以根据设备切换布局，比如桌面用row，移动端用column -->
  [fxLayout]="isMobile ? 'column' : 'row'"
  fxLayoutGap="8px" 
  fxLayoutAlign="start stretch"
>
  <mat-grid-list 
    <!-- 移动端直接设为1列，桌面保持7列 -->
    [cols]="isMobile ? 1 : 7" 
    rowHeight="1:1" 
    gutterSize="8px"
  >
    <mat-grid-tile 
      *ngFor="let topic of topics" 
      [style.background]="topic.color" 
      [style.color]="topic.font" 
      [rowspan]="topic.rowspan" 
      [colspan]="getColspan(topic, isMobile)"
    >
      {{topic.title}}
    </mat-grid-tile>
  </mat-grid-list>
</mat-card>

额外小优化 #

如果你的fxLayout在不同设备需要不同值，直接修改[fxLayout]的绑定逻辑就行，比如桌面用row，移动端用column，完全灵活可控。

为什么这个方案能解决问题？ #

BreakpointObserver是Angular CDK提供的专门监听断点变化的服务，它会实时监控媒体查询的变化，一旦窗口进入或离开某个断点，就会触发Observable的更新，再通过async管道自动触发Angular的变更检测，这样布局和colspan就会跟着动态更新了。

内容的提问来源于stack exchange，提问作者vicky