Блог

Главная - Вопросы по программированию - почему программируемая поисковая система Google не отображается в Angular

почему программируемая поисковая система Google не отображается в Angular

#angular #search-engine #google-search

#angular #поисковая система #google-поиск

Вопрос:

Я работаю над приложением Angular и хочу использовать программируемую поисковую систему Google в разделе / покупки. Я включил тег script в свой index.html файл. Ниже приведен HTML для my shopping-list.compononent.ts , который находится на пути /shopping 

 <div class="jumbotron">
    <div class="container-fluid">
      <h1 class="display-4"><span><img src="assets/undraw_empty_cart.svg" alt="Card thumbnail" style="width: 1.5em; height: auto;"></span>Your cart</h1>
      <p class="lead">Manage the ingredients that you want to buy here</p>
      <br/>
      <div class=" col-lg-8 list-group list-group-flush">
        <app-shopping-item *ngFor="let shoppingItem of shoppingCartRecipes" [shoppingItem]="shoppingItem"></app-shopping-item>
      </div>      
      
      <div class="col-lg-4 gcse-search"></div>
    </div>
  </div>

И вот index.html 

 <!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ShoppingApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css2?family=Kumbh Sans:wght@300;400;700amp;display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/96250b37a0.js" crossorigin="anonymous"></script>
  <script async src="https://cse.google.com/cse.js?cx=dc5cfbd31541cbb99"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

И по какой-то причине окно поиска не отображается. При проверке элемента div все еще присутствует, но он не отображается, и его свойство ничем не изменяется на display: none;

Что здесь происходит? И какой может быть хороший способ встроить поиск Google в проект Angular? Спасибо.

Ответ №1:

Попробуйте следующие решения :

  1. Попробуйте удалить col-lg-4 из набора классов.

  2. Добавьте оболочку div вокруг класса.