javascript - Angular 7如何将内联JS脚本包含到组件中？

Question

我想将places.js 库安装到我的Angular 7 项目中，但我遇到了问题。我已将以下脚本包含到我的“index.html”文件中

 <script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="07776b66646274296d7447362936312933" rel="noreferrer noopener nofollow">[email protected]</a>"></script>
  <script>
    var placesAutocomplete = places({
      appId: 'myAppId',
      apiKey: 'myApiKey',
      container: document.querySelector('#addressInput')
    });
  </script>

但只有当我有

时它才起作用

<input type="search" id="address-input" placeholder="Where are we going?" />

在我的“index.html”中。我尝试将此输入包含到我的组件中，但它不起作用，并且出现错误

<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d5d414c4e485e03475e6d1c031c1b0319" rel="noreferrer noopener nofollow">[email protected]</a>:1 Uncaught Error: Algolia Places: 'container' must point to an <input> element.

是否可以附加此脚本并使其正常工作？在文档中没有任何关于 typescript 的内容。我也尝试过 npm install 和

import * from 'places.js'

但有同样的问题。有人可以帮忙吗？

Answer 1

最好将其嵌入到 Angular 组件中使用:

import { Component, OnInit } from "@angular/core";
import places from "places.js";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  title = "my-app";

  ngOnInit(): void {
    const placesAutocomplete = places({
      appId: "appId",
      apiKey: "appKey",
      container: document.querySelector("#address-input")
    });
  }
}

您还应该将其放入 polyfill.js 中以使其正常工作:

(window as any).process = {
  env: { DEBUG: undefined }
};

(window as any).global = window;