Angular复用EmbeddedViewRef后无法获取正确视图高度的问题

为什么创建视图时能正确获取高度，复用却不行？ #

• 新视图创建流程：调用createEmbeddedView时，Angular会同步完成视图初始化、DOM节点创建与插入，随后的detectChanges会触发所有绑定的同步更新——包括*ngIf这类结构型指令的DOM增删操作。此时浏览器会立即完成布局计算，所以读取offsetHeight能拿到最新的准确值。
• 视图复用流程：复用已有视图时，DOM节点早已存在于容器中。更新上下文并调用detectChanges后，Angular会同步更新DOM的内容或结构，但浏览器为了优化性能，会将重排请求异步调度到下一次事件循环。此时立即读取offsetHeight，浏览器还没执行最新的布局计算，自然拿到的是旧高度。

解决方法 #

方法1：等待浏览器重绘后读取高度（推荐） #

利用requestAnimationFrame，它会在浏览器下一次重绘前执行回调，此时布局已经更新完成：

const viewRef = viewContainerRef.get(index) as EmbeddedViewRef<any>;
viewRef.context.$implicit = item;
viewRef.detectChanges();

requestAnimationFrame(() => {
  const height = viewRef.rootNodes[0].offsetHeight;
  // 在这里使用高度值
});

方法2：强制触发浏览器重排（应急方案） #

读取会触发浏览器同步重排的属性（如offsetWidth、getBoundingClientRect()），强制浏览器立即更新布局：

const viewRef = viewContainerRef.get(index) as EmbeddedViewRef<any>;
viewRef.context.$implicit = item;
viewRef.detectChanges();

// 强制触发重排
void viewRef.rootNodes[0].offsetWidth;
const height = viewRef.rootNodes[0].offsetHeight;

方法3：确保变更检测完整触发 #

如果视图的变更检测状态异常，可以结合markForCheck()标记视图需要检测，再执行detectChanges()：

const viewRef = viewContainerRef.get(index) as EmbeddedViewRef<any>;
viewRef.context.$implicit = item;
viewRef.markForCheck();
viewRef.detectChanges();

requestAnimationFrame(() => {
  const height = viewRef.rootNodes[0].offsetHeight;
});

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