为什么谷歌可编程搜索引擎没有显示在 Angular 上答案

【问题标题】：why is Google programmable search engine not displaying on Angular为什么谷歌可编程搜索引擎没有显示在 Angular 上
【发布时间】：2020-12-23 08:40:06
【问题描述】：

我正在开发一个 Angular 应用程序，我想在 /shopping 部分使用 Google 的可编程搜索引擎。我已将脚本标签包含在我的index.html 文件中。以下是我的shopping-list.compononent.ts 的html，它在/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;700&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;

这里发生了什么？将谷歌搜索嵌入到 Angular 项目中的好方法是什么？谢谢。

【问题讨论】：

标签： angular search-engine google-search

【解决方案1】：

尝试以下解决方案：

尝试从类集中删除col-lg-4。
在类周围添加一个包装器 div。

【讨论】：