Html 角度自定义谷歌搜索栏仅用于重新加载

我正在尝试将Google自定义搜索/可编程搜索栏集成到我的angular应用程序中。它只有在我重新加载网站时才起作用

首次实地考察：

一旦我刷新/重新加载网站（按：F5），结果将加载：

我已将google生成的代码粘贴到组件中：

<div class="gcse-searchresults-only"></div>

来自Google的必要Javascript被添加到模块的index.html中：

试试谷歌搜索

我知道这已经很老了，但我到处寻找解决这个问题的方法。我用Angular创建了一个网站，我的GCSE搜索工具只会在页面F5'ing后显示

我终于找到了这个，它解决了我的问题：

在我的

searchpage.component.html

中：

<div id="searchbox"></div>

ngAfterViewInit() {
    this.loadScriptsSearchBox();
};

loadScriptsSearchBox(): any {


    var gcseDiv = document.getElementById('searchbox');
    gcseDiv.innerHTML = '<gcse:search></gcse:search>'

    var cx = '###uniqueid###';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);


}