检测 DOM 中 Web 组件的安装

Posted 2023-02-22

【中文标题】检测 DOM 中 Web 组件的安装

【英文标题】：Detect mounting of web-component in DOM

【发布时间】：2021-10-30 07:23:57

【问题描述】：

我读到了这个thread 创建的网络组件：

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

它在 Angular 中运行良好。如何检测 Web 组件何时挂载到 DOM 中？

在这段代码中我得到空值：

ngAfterViewInit() 
  const myComponent = document.getElementById('my-component')
  console.log(myComponent) //null

在这段代码中，我得到了我的组件，但我应该等待 0.5 秒：

ngAfterViewInit() 
        setTimeout(
            function() 
                const myComponent = document.getElementById('my-component')
                console.log(myComponent) //not null                
            , 500)
    

是否有任何工具（事件）来？

【问题讨论】：

我猜你的 web 组件可以简单地在***元素上触发一个 customEvent ？你的 Angular 应用可以监听那个事件。

@MikeOne 是的，我可以从我的网络组件中调用该函数，但是如何检测它何时安装在 Angular 的网络应用程序 DOM 中？

恕我直言，您学习 Web 组件的顺序错误。您现在首先学习工具语法，然后再学习核心技术。我的建议是，首先学习开发（基本的）vanilla javascript Web Components。之后选择一个工具来加速开发。

【参考方案1】：

需要从docs添加connectedCallback()：

Vue.customElement('web-component', (MyWebComponent as any).options,  connectedCallback() 
      console.info('connectedCallback', this)
    )