Angular 5中如何等待createEmbeddedView渲染完成后执行DOM操作？

问题原因 #

你碰到的这个情况，核心是Angular的变更检测机制在起作用：当你调用createEmbeddedView创建嵌入视图后，Angular只是标记了视图需要更新，但像*ngFor这种结构性指令生成的<li>元素，要等到下一次变更检测循环跑完才会真正渲染到DOM里。所以你现在同步执行的代码，只能抓到根节点<ul>，还看不到循环出来的列表项。

靠谱的解决方案 #

这里有几种方法能确保你在整个模板（包括*ngFor的元素）完全渲染好之后，再执行onShow里的DOM操作：

1. 用setTimeout延迟执行（最简单）

把你的DOM操作逻辑放到setTimeout里，它会让代码等当前的宏任务结束——也就是Angular完成变更检测和DOM渲染之后再跑：

showTemplate(value: TemplateRef<any>, props?: OverlayProps) {
  this.embeddedViewRef = this.container.createEmbeddedView(value);
  if (props && props.onShow) {
    // 延迟到下一个宏任务，确保所有DOM元素都已渲染
    setTimeout(() => {
      this.embeddedViewRef.rootNodes.forEach(element => {
        props.onShow(element);
        // 直接在这里实现滚动逻辑也可以
        const selectedItem = element.querySelector('.selected');
        if (selectedItem) {
          selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        }
      });
    });
  }
}

2. 用NgZone贴合Angular的变更检测流程

如果不想依赖setTimeout的“黑魔法”，可以注入NgZone来精准控制代码执行时机，避免不必要的变更检测触发：
首先在组件构造函数里注入NgZone：

constructor(private ngZone: NgZone) {}

然后修改showTemplate方法：

showTemplate(value: TemplateRef<any>, props?: OverlayProps) {
  this.embeddedViewRef = this.container.createEmbeddedView(value);
  if (props && props.onShow) {
    this.ngZone.runOutsideAngular(() => {
      setTimeout(() => {
        this.ngZone.run(() => {
          this.embeddedViewRef.rootNodes.forEach(element => {
            props.onShow(element);
            const selectedItem = element.querySelector('.selected');
            if (selectedItem) {
              selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }
          });
        });
      });
    });
  }
}

这种方式更符合Angular的运行机制，适合对性能有要求的场景。

3. 用AfterViewChecked钩子监听视图更新（精准控制）

如果你想更精准地监听视图渲染完成的时机，可以让组件实现AfterViewChecked钩子，但要注意加个状态标记避免无限循环：

import { AfterViewChecked, ViewContainerRef, ViewChild, TemplateRef, EmbeddedViewRef } from '@angular/core';

export class OverlayComponent implements AfterViewChecked {
  embeddedViewRef: EmbeddedViewRef<any>;
  private isViewFullyRendered = false;
  private currentProps?: OverlayProps;
  @ViewChild('mntPageOverlayContainer', {read: ViewContainerRef}) container: ViewContainerRef;

  showTemplate(value: TemplateRef<any>, props?: OverlayProps) {
    this.isViewFullyRendered = false;
    this.currentProps = props;
    this.embeddedViewRef = this.container.createEmbeddedView(value);
  }

  ngAfterViewChecked() {
    if (this.embeddedViewRef && !this.isViewFullyRendered) {
      // 检查是否存在<li>元素，确认*ngFor已渲染完成
      const hasRenderedItems = this.embeddedViewRef.rootNodes.some(node => 
        node.querySelector('li') !== null
      );
      if (hasRenderedItems && this.currentProps?.onShow) {
        this.isViewFullyRendered = true;
        this.embeddedViewRef.rootNodes.forEach(element => {
          this.currentProps!.onShow(element);
          const selectedItem = element.querySelector('.selected');
          if (selectedItem) {
            selectedItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
          }
        });
      }
    }
  }
}

这种方式适合对执行时机要求极高的场景，不过需要额外维护状态标记，避免重复执行逻辑。

小提示 #

• 其实你的模板根元素就是<ul>，没必要遍历所有rootNodes，直接取第一个根节点操作就行，比如const ulElement = this.embeddedViewRef.rootNodes[0];。
• 记得给OverlayProps的onShow方法定义正确的类型，比如onShow?: (element: HTMLElement) => void，避免类型报错。

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