Angular 7 如何将内联 JS 脚本包含到组件中? [英] Angular 7 how to include inline JS script into component?

问题描述

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

I'd like to install places.js library into my Angular 7 project, but I have a problem. I've included following script into my 'index.html' file

 <script src="https://cdn.jsdelivr.net/npm/places.js@1.16.4"></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"中.我尝试将此输入包含到我的组件中，但它不起作用并且出现错误

in my 'index.html'. I've tried to include this input into my component but it's not working and I have an error

places.js@1.16.4:1 Uncaught Error: Algolia Places: 'container' must point to an <input> element.

是否可以附加此脚本并使其工作?在文档中没有关于打字稿的内容.我也试过 npm install 和

Is it possible to attach this script and make it working? In the documentation there is nothing about typescript. I've also tried to npm install and

import * from 'places.js'

但有同样的问题.有人可以帮忙吗?

but have same issue. Could someone help?

推荐答案

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

Better to use it embedded in an Angular Component:

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 中以使其工作:

you should place also this in your polyfill.jsin order to make it work:

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

(window as any).global = window;

这篇关于Angular 7 如何将内联 JS 脚本包含到组件中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！