为什么Google可编程搜索引擎未在Angular上显示

如何解决为什么Google可编程搜索引擎未在Angular上显示

我正在开发Angular应用程序，并且想在/ shopping部分使用Google的可编程搜索引擎。我已经在我的index.html文件中包含了脚本标签。以下是shopping-list.compononent.ts

上我的/shopping的html

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

由于某种原因，搜索框没有显示。在inspect元素上，div仍然存在，但未显示，并且其属性未更改为display: none;

这是怎么回事？将Google搜索嵌入到Angular项目中的一种好方法是什么？谢谢。

解决方法

尝试以下解决方案：

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