Блог

Главная - Вопросы по программированию - Угловая пользовательская панель поиска Google работает только при перезагрузке

Угловая пользовательская панель поиска Google работает только при перезагрузке

#html #angular #typescript #google-search

#HTML #угловая #typescript #google-поиск

Вопрос:

Я пытаюсь интегрировать пользовательский поиск Google / программируемую панель поиска в мое приложение angular. Это работает, только если я перезагружаю веб-сайт.

При первом посещении сайта:

Веб-сайт без загруженного поиска

Как только я обновляю / перезагружаю веб-сайт (нажатие: F5), результаты загружаются:

Загруженные результаты поиска

Я вставил код, сгенерированный Google внутри компонента:

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

Необходимый Javascript от Google добавлен в index.html модуля:

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Try Google Search</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script async src="https://cse.google.com/cse.js?cx=e8453de87d4ac0ce5"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

Спасибо за вашу помощь!

Ответ №1:

Я знаю, что это довольно старое, но я искал повсюду решение именно этой проблемы. Я создал сайт с использованием Angular, и мой инструмент поиска GCSE будет отображаться только после нажатия F5 на страницу.

Я наконец нашел это, и это решило мои проблемы:

В моем searchpage.component.html :

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

И в моем searchpage.component.ts (под ngOnInit):

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


}