Angular 7, как включить встроенный JS-скрипт в компонент? - PullRequest
Новая
       14

Angular 7, как включить встроенный JS-скрипт в компонент?

1 голос
/ 12 мая 2019

Я бы хотел установить библиотеку place.js в свой проект Angular 7, но у меня возникла проблема.Я включил следующий скрипт в мой файл index.html 

 <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.Я пытался включить этот вход в мой компонент, но он не работает, и у меня есть ошибка 

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

Можно ли присоединить этот скрипт и заставить его работать?В документации нет ничего о машинописи.Я также пытался установить npm и 

import * from 'places.js'

, но у меня возникла та же проблема.Может ли кто-нибудь помочь?

Ответы [ 4 ]

1 голос
/ 12 мая 2019

Лучше использовать его, встроенный в угловой компонент: 

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;
0 голосов
/ 12 мая 2019

Ну, по моим наблюдениям, для этого требуется, чтобы вход был загружен еще до того, как был вызван, и вы присоединяете его к своему индексу до того, как этот вход когда-либо загрузится. Конечно, это не сработает 

var placesAutocomplete = places({
  appId: 'myAppId',
  apiKey: 'myApiKey',
  container: document.querySelector('#addressInput')
});

Есть несколько других способов сделать это, но в моем случае я бы создал службу, что-то вроде 

declare var places:any;
@Injectable({providedIn:'root'})
export class PlacesServices {
      setup(){
        var placesAutocomplete = places({
        appId: 'myAppId',
        apiKey: 'myApiKey',
        container: document.querySelector('#addressInput')
       });
      }

}

затем внедрите его в ваш компонент и вызывайте его только тогда, когда загружен ввод с правильным идентификатором, вам нужен ngAfterViewInit, чтобы убедиться, что представления загружены 

ngAfterViewInit(){
   this.placesService.setup();
  //i would be calling the setup here on the component with the input
}

Сценарий js может быть добавлен в index.html или точно так же, как указано в ответе Хьена.

Я только что напечатал это, возможно, есть какая-то опечатка, но вы должны понять. Надеюсь, это работает для вас!

0 голосов
/ 12 мая 2019

Вам необходимо сохранить весь код места в компоненте и инициализировать его на ngOnItit(). 

import { Component, OnInit } from '@angular/core';
import * as Places from 'places';

@Component({
  selector: 'my-app',
  templateUrl: './yourComponent.html'
})
export class AppComponent implements OnInit  {

  ngOnInit(){
    Places({
      appId: 'myAppId',
      apiKey: 'myApiKey',
      container: document.querySelector('#addressInput')
    });
  }
}

yourComponent.html: 

<input type="search" id="address-input" placeholder="Where are we going?" />
0 голосов
/ 12 мая 2019

Я попробовал ваш путь, но безуспешно.

Вам нужно скачать places.js файл и поместить в папку скрипта.

Обновление angular.json файла у разработчика> скриптов 

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