添加全屏Loader后fxLayout row wrap响应式布局失效如何解决

• 这是Angular Flex Layout的已知问题：当带有flex布局属性的容器通过*ngIf动态插入DOM、同时绑定了进场动画时，Flex Layout内部的resize事件监听没有正确初始化，只有触发DOM重绘操作（比如鼠标悬停元素）时才会重新计算flex布局参数。
• 你使用的fxLayoutGap="10px grid"属于grid模式间距计算，本身对动态渲染内容的适配性较差，会进一步加剧布局不生效的问题。

按优先级从高到低选择即可：

1. 手动触发flex布局重计算 #

在组件中注入MediaObserver，在loading状态切换为false后手动触发一次media查询更新，强制Flex Layout重新计算布局：

// 组件头部导入
import { MediaObserver } from '@angular/flex-layout';
import { take } from 'rxjs/operators';

// 构造器注入
constructor(private mediaObserver: MediaObserver) {}

// loading结束的逻辑中添加
this.loading = false;
// 等待DOM插入完成后触发重计算
setTimeout(() => {
  this.mediaObserver.media$.pipe(take(1)).subscribe();
}, 0);

该方案侵入性最低，不需要修改现有模板结构

2. 替换fxLayoutGap的grid模式 #

移除fxLayoutGap的grid参数，改用原生CSS gap实现间距，兼容性和稳定性更好：

<!-- 修改前 -->
<div fxLayout="row wrap" fxLayoutGap="10px grid">
<!-- 修改后 -->
<div fxLayout="row wrap" style="gap: 10px;">

3. 替换*ngIf为属性隐藏 #

如果不需要销毁/重建内容容器，可将*ngIf="!loading"改为[hidden]="loading"，让容器始终保留在DOM中，避免动态插入导致的监听失效：

<div [hidden]="loading" class="content" [@scaleUp]="filteredArr.length">

需要补充全局CSS避免hidden属性被样式覆盖：

[hidden] {
  display: none !important;
}

4. 延后动画触发时机 #

如果上述方案都不生效，可以将动画触发时机延后到布局计算完成后：

// 组件中新增变量
triggerAnimation = 0;

// loading结束时修改为
this.loading = false;
setTimeout(() => {
  this.triggerAnimation = this.filteredArr.length;
}, 50);

模板同步修改：

<div *ngIf="!loading" class="content" [@scaleUp]="triggerAnimation">

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