Javascript Angular 7如何将内联JS脚本包含到组件中？

我想在Angular 7项目中安装places.js库，但我有一个问题。我已将以下脚本包含到我的“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>

---

但是有同样的问题。有人能帮忙吗？

我试过你的方法，但没有成功

您需要下载

places.js

文件并放入脚本文件夹

在生成器中更新

angular.json

文件>脚本

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

---

您需要将所有位置代码保留在组件中，并在

ngonitt（）

上对其进行初始化

yourComponent.html：

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

---

最好将其嵌入角度组件中：

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;

---

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

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所指出的那样

我刚打出来，可能有一些打字错误，但你应该明白。希望它对你有用

可能重复的

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

(window as any).global = window;

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(){
   this.placesService.setup();
  //i would be calling the setup here on the component with the input
}