javascript - Angular 7 cum să includ un script JS inline într-un component?


Aș dori să instalez biblioteca places.js în proiectul meu Angular 7, dar am o problemă. Am inclus următorul script în fișierul meu 'index.html'

 <script src="https://cdn.jsdelivr.net/npm/[email "></script>
  <script>
    var placesAutocomplete = places({
      appId: 'myAppId',
      apiKey: 'myApiKey',
      container: document.querySelector('#addressInput')
    });
  </script>

dar funcționează doar când am

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

în fișierul meu 'index.html'. Am încercat să includ această intrare în componenta mea, dar nu funcționează și am o eroare

[email :1 Uncaught Error: Algolia Places: 'container' must point to an <input> element.

Este posibil să atașăm acest script și să-l facem să funcționeze? În documentație nu există nimic despre typescript. De asemenea, am încercat să fac npm install și

import * from 'places.js'

dar am aceeași problemă. Ar putea cineva să mă ajute?

Răspuns #1

Este mai bine să-l folosești integrat într-un component 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")
    });
  }
}

ar trebui să pui și asta în polyfill.js pentru a-l face să funcționeze:

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

(window as any).global = window;

Răspunsul #2

Am încercat metoda ta, dar nu am avut succes.

Trebuie să descărcați fișierul places.js și să-l puneți într-un folder de scripturi.

Actualizați fișierul angular.json la builder > scripts

 "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...
        "assets": [...],
        "styles": [...],
        "scripts": [
          "script/places.js"
        ]
      },