Vyhledávání na webu

javascript - Angular 7 jak zahrnout inline JS skript do komponenty?


Chtěl bych nainstalovat knihovnu places.js do svého projektu Angular 7, ale mám problém. Do souboru 'index.html' jsem zahrnul následující skript

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

ale funguje to pouze když mám

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

v mém 'index.html'. Snažil jsem se zahrnout tento vstup do mé komponenty, ale nefunguje to a mám chybu

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

Je možné tento skript připojit a udělat ho funkční? V dokumentaci není nic o TypeScriptu. Také jsem zkoušel npm install a

import * from 'places.js'

ale mám stejný problém. Mohl by mi někdo pomoct?

Odpověď č. 1

Lépe je jej použít zabudovaný v komponentě Angularu:

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")
    });
  }
}

také byste měli vložit toto do svého polyfill.js, aby to fungovalo:

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

(window as any).global = window;

Odpověď č. 2

Zkoušel jsem tvůj způsob, ale neuspěl jsem.

Potřebujete stáhnout soubor places.js a umístit jej do složky se skripty.

Aktualizujte soubor angular.json v části builder > scripts

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