Javascript Angular中的innerHTML问题

在我的角度服务中，我有如下三种方法

        public loadLiveChat() {
            let url: string;
            url = this.appConfig.config.liveAgent.liveAgentScriptUrl;
            this.dynamicallyLoadScript(url);
        }

        public dynamicallyLoadScript(url) {
            const script = document.createElement('script');
            script.src = url;
            document.head.appendChild(script);
            // const agentScriptLoadInterval = setInterval( () => {
            //     this.openLiveChat();
            //     clearInterval(agentScriptLoadInterval);
            // }, 500);
            setTimeout( () => {
                this.openLiveChat();
            }, 5000);
        }

        public openLiveChat() {
            const laq = '_laq';
            this.getLiveAgentClient().init(this.appConfig.config.liveAgent.liveAgentChatUrl,
                this.appConfig.config.liveAgent.liveAgentOrganizationalId,
                this.appConfig.config.liveAgent.liveAgentDeploymentId);

            if (!window[laq]) {
                window[laq] = [];
            }
            window[laq].push( () => {
                this.getLiveAgentClient().showWhenOnline(this.buttonId, document.getElementById('liveagent_button_online_' + this.buttonId));
                this.getLiveAgentClient().showWhenOffline(this.buttonId, document.getElementById('liveagent_button_offline_' + this.buttonId));
            });

            const forChat = document.querySelector('#uhChat');
            forChat.innerHTML = `<a><img id="liveagent_button_online_${this.buttonId}"
                style="display: none; border: 0px none; cursor: pointer; height: 16.05px;
                margin-right: 10px; margin-top: 1px;" />

                <img id="liveagent_button_offline_${this.buttonId}"
                style="display: none; border: 0px none;
                height: 16.05px; cursor: pointer; margin-right: 10px; margin-top: 1px" /> Chat</a>`;

            document.querySelector('#liveagent_button_offline_' + this.buttonId).addEventListener('click', () => {
                this.loadLivechatOfflinePage();
            });

            document.querySelector('#liveagent_button_online_' + this.buttonId).addEventListener('click', () => {
                this.initilizeLiveChat();
            });
        }

public loadLiveChat（）{
让url:string；
url=this.appConfig.config.liveAgent.liveagentstriptur；
this.dynamicallyLoadScript（url）；
}
公共dynamicallyLoadScript（url）{
const script=document.createElement（'script'）；
script.src=url；
document.head.appendChild（脚本）；
//const agentScriptLoadInterval=setInterval（（）=>{
//这是openLiveChat（）；
//clearInterval（agentScriptLoadInterval）；
// }, 500);
设置超时（（）=>{
这是openLiveChat（）；
}, 5000);
}
公共openLiveChat（）{
常量laq='u laq'；
this.getLiveAgentClient（）.init（this.appConfig.config.liveAgent.liveAgentChatUrl，
this.appConfig.config.liveAgent.liveAgentOrganizationalId，
此文件名为.appConfig.config.liveAgent.liveAgentDeploymentId）；
如果（！窗口[laq]）{
窗口[laq]=[]；
}
窗口[laq]。推送（（）=>{
this.getLiveAgentClient（）.showWhenOnline（this.buttonId，document.getElementById（'liveagent_button_online_'+this.buttonId））；
this.getLiveAgentClient（）.showWhenOffline（this.buttonId，document.getElementById（'liveagent_button_offline_'+this.buttonId））；
});
const-forChat=document.querySelector（'uhChat'）；
forChat.innerHTML=`
聊天`；
document.querySelector（“#liveagent_button_offline”+this.buttonId）。addEventListener（'单击'，（）=>{
this.loadLivechatOfflinePage（）；
});
document.querySelector（“#liveagent_button_online”+this.buttonId）.addEventListener（'click'，（）=>{
this.initilizeLiveChat（）；
});
}

---

当页面加载时，我在控制台中得到未定义/null错误的innerHTML。请重新排列此代码以修复该错误，有什么建议吗？

只有在DOM有

#uhChat

元素可供查找后，您才需要调用服务方法。

执行querySelector时，HTML中可能没有id为

uhChat

的元素。document.querySelector（“#uhChat”）-该#uhChat元素何时插入您的DOM？我有一个id为uhChat的li，在加载uhChat后如何运行脚本？仅在组件的ngAfterViewInit方法中调用服务。