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

【问题标题】：Angular 7 how to include inline JS script into component?Angular 7 如何将内联 JS 脚本包含到组件中？
【发布时间】：2019-09-29 14:45:39
【问题描述】：

我想将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'

但有同样的问题。有人可以帮忙吗？

【问题讨论】：

I want to download a script from cdn and use it的可能重复

标签： javascript angular typescript api algolia

【解决方案1】：

我尝试了你的方法，但没有成功。

你需要下载places.js文件并放到一个脚本文件夹中。

在 builder > 脚本中更新 angular.json 文件

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

【讨论】：

【解决方案2】：

您需要将所有 Place 代码保存在一个组件中，并在 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')
    });
  }
}

你的组件.html：

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

【讨论】：

【解决方案3】：

最好将其嵌入到 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;

【讨论】：

【解决方案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 回答指出的那样添加。

我刚刚输入了它，可能有一些错字，但你应该明白了。希望它对你有用！

【讨论】：