Question

我想将places.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 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;

Answer 2

我尝试过但没有成功。

您需要下载places.js文件并放入脚本文件夹。

在构建器>脚本中更新angular.json文件

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

Answer 3

您需要将所有地方代码保留在组件中，并在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?" />

Answer 4

嗯，从我的观察来看，这需要在调用之前先加载输入，并且要在加载输入之前将其附加到索引。当然这行不通

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

}

然后将其注入到组件中，并且仅在加载具有正确ID的输入时调用它，您需要ngAfterViewInit来确保视图已加载

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

js脚本既可以添加到index.html上，也可以像Hien指出的那样添加。

我刚刚输入的内容，可能会有一些错字，但您应该明白这一点。希望它对您有用！

Angular 7如何将嵌入式JS脚本包含到组件中？

4 个答案: