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