Angular FxFlex Layout MediaObserver如何基于指定div计算激活宽度？

1. 能否配置flex-layout监听指定div而非窗口宽度 #

官方没有提供开箱即用的配置项，但可以通过替换内置依赖的方式实现该需求，无需修改原有业务代码的响应式指令写法。

2. 能否重写MediaObserver的isActive方法 #

可以，但更稳定的方案是替换底层的MatchMedia服务，Flex-Layout的MediaObserver本质依赖该服务返回的断点匹配结果，替换该服务后所有内置的fxHide、fxFlex等响应式指令都会自动适配新的匹配逻辑。 #

具体实现步骤 #

第一步：实现自定义MatchMedia服务

该服务会优先监听指定id的容器宽度，找不到容器时自动回退到默认的窗口宽度匹配逻辑，兼容独立运行和嵌入运行两种场景：

import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { MatchMedia, MediaChange } from '@angular/flex-layout';
import { isPlatformBrowser } from '@angular/common';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class ContainerMatchMedia extends MatchMedia {
  // 嵌入场景下的基准容器id，可按需修改
  private readonly TARGET_CONTAINER_ID = 'app-container';
  private container: HTMLElement | null = null;
  private resizeObserver: ResizeObserver | null = null;
  // 自定义断点映射，和你业务定义的断点保持一致即可
  private readonly breakpoints = new Map([
    ['xs', '(max-width: 600px)'],
    ['sm', '(max-width: 960px)'],
    ['md', '(min-width: 961px)']
  ]);

  constructor(@Inject(PLATFORM_ID) platformId: Object) {
    super(platformId);
    if (!isPlatformBrowser(platformId)) return;
    // 优先取嵌入场景的基准容器，不存在则用body回退到窗口匹配逻辑
    this.container = document.getElementById(this.TARGET_CONTAINER_ID) || document.body;
    this.initContainerListener();
  }

  private initContainerListener() {
    this.resizeObserver = new ResizeObserver(entries => {
      const containerWidth = entries[0].contentRect.width;
      // 容器宽度变化时触发所有断点的重新校验
      this.breakpoints.forEach((query, alias) => {
        const isActive = this.matchQuery(query, containerWidth);
        this.registeredMedia.get(query)?.next(new MediaChange(isActive, query, alias));
      });
    });
    this.resizeObserver.observe(this.container!);
  }

  override matchQuery(query: string, containerWidth?: number): boolean {
    // 回退到窗口模式时走官方默认逻辑
    if (this.container === document.body) {
      return super.matchQuery(query);
    }
    // 嵌入场景用容器宽度模拟媒体查询匹配
    const width = containerWidth || this.container.clientWidth;
    if (query.includes('max-width: 600px')) return width <= 600;
    if (query.includes('max-width: 960px')) return width <= 960;
    if (query.includes('min-width: 961px')) return width > 960;
    // 其他未定义的查询走默认逻辑
    return super.matchQuery(query);
  }

  override ngOnDestroy() {
    this.resizeObserver?.disconnect();
    super.ngOnDestroy();
  }
}

第二步：在核心模块中替换默认提供者

在你的根模块或者核心模块的providers数组中添加如下配置，替换Flex-Layout内置的MatchMedia服务：

import { NgModule } from '@angular/core';
import { FlexLayoutModule, MatchMedia } from '@angular/flex-layout';
import { ContainerMatchMedia } from './container-match-media.service';

@NgModule({
  imports: [FlexLayoutModule],
  providers: [
    { provide: MatchMedia, useClass: ContainerMatchMedia }
  ]
})
export class CoreModule { }

注意事项 #

• 嵌入到其他页面时，仅需要宿主页面在你的应用挂载位置的外层div上添加id="app-container"即可，不需要修改其他业务代码
• 独立运行时如果找不到指定id的容器，会自动回退到基于窗口宽度的匹配逻辑，无需额外做环境判断
• 如果你有自定义的其他断点，直接修改代码中breakpoints映射表即可适配
• 如果只需要少量响应式判断，不想修改底层服务，也可以自行封装结构指令，直接监听容器宽度控制元素显示隐藏，实现成本更低

内容的提问来源于stack exchange，提问作者Maciej Skrzypiński