在 DOM 中检测网络组件的安装

Question

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

<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)
    }

是否有任何工具（事件）可以检测 DOM 中网络组件的安装？

Answer 1

需要从 docs:

添加 connectedCallback()

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

在 DOM 中检测网络组件的安装

Detect mounting of web-component in DOM

javascript

web-component

typescript

vue.js

angular