如何在Angular中检测web-component完成挂载到DOM的时机

解决方案 #

方案1：使用Angular模板引用变量（最推荐） #

不需要调用原生DOM查询方法，直接通过Angular自带的视图查询能力获取元素：

1. 在模板中给web component添加引用标记

<my-vue-web-comp [userId]="1" #myVueComp id="my-component"></my-vue-web-comp>

2. 在组件中通过@ViewChild获取引用，首先需要在对应模块中添加CUSTOM_ELEMENTS_SCHEMA避免Angular识别自定义标签报错：

// 所属模块文件
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  // 其他配置保持不变
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class YourModule {}

3. 组件逻辑代码：

import { ViewChild, AfterViewInit, ElementRef } from '@angular/core';

export class YourComponent implements AfterViewInit {
  @ViewChild('myVueComp', { static: false }) myVueComp!: ElementRef<HTMLElement>;

  ngAfterViewInit() {
    // 可直接获取到已挂载的元素
    console.log(this.myVueComp.nativeElement);
  }
}

方案2：使用MutationObserver监听DOM变化 #

适用于web component是动态插入到DOM、无法提前在模板中标记引用的场景：

ngAfterViewInit() {
  // 替换为web component实际所属的父容器节点，缩小监听范围提升性能
  const parentContainer = document.body;
  const observer = new MutationObserver((mutations) => {
    for (const mutation of mutations) {
      if (mutation.addedNodes.length) {
        const targetComp = document.getElementById('my-component');
        if (targetComp) {
          console.log(targetComp);
          // 拿到元素后停止监听避免内存泄漏
          observer.disconnect();
          break;
        }
      }
    }
  });

  observer.observe(parentContainer, { childList: true, subtree: true });
}

方案3：通过web component抛出自定义事件通知（最准确） #

直接在Vue侧的web component挂载完成后触发自定义事件，Angular侧监听事件即可：

1. 修改Vue组件代码，挂载时触发自定义事件：

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  // 抛出可冒泡的自定义事件
  const mountEvent = new CustomEvent('vue-comp-mounted', { bubbles: true });
  document.dispatchEvent(mountEvent);
})
</script>

2. Angular侧监听事件：

ngAfterViewInit() {
  const handleMount = () => {
    const myComponent = document.getElementById('my-component');
    console.log(myComponent);
  };
  // 添加一次性监听，避免内存泄漏
  document.addEventListener('vue-comp-mounted', handleMount, { once: true });
}

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