Angular 中的 innerHTML 問題

Question

在我的 angular 服務中，我有如下三種方法

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

當頁面加載時，我在控制台中收到未定義/空錯誤的 innerHTML。 請重新排列此代碼以修復該錯誤的任何建議？

Answer 1

只有在您的 DOM 找到#uhChat元素后，您才需要調用您的服務方法。