如何在 Angular 2 中动态设置 index.html 中的 Google 地图键？

Question

如何在 Angular 2 中动态设置 index.html 中的 Google 地图键？

我正在尝试在我的角度项目中动态设置谷歌地图键。

通常我们在 Angular 项目的 index.html 文件中设置该 API 密钥。现在我想动态更改该键。我将通过一些 API 获取该密钥，问题是如何在我的 index.html 中设置它。任何帮助将不胜感激。

索引.html

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Angular App</title>

  <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&libraries=places,drawing&callback=initMap"></script>

  <script src="https://apis.google.com/js/platform.js" async defer></script>

  <link rel="icon" type="image/x-icon" href="web_images/title_image.png">
</head>

</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

这是一些适合我JavaScript在 Angular 中加载的解决方案。它可能会帮助你..

应用程序组件.ts

export class AppComponent implements OnInit {
      scripts: any;

  ngOnInit() {
    this.loadScript('https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&libraries=places,drawing&callback=initMap').then(() => {
      console.log('Success')
    })
  }

loadScript(name: string) {
    return new Promise((resolve, reject) => {
      let script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = name;
      document.getElementsByTagName('head')[0].appendChild(script);
      console.log('Script Loaded');
      resolve()
    });
  }

Run Code Online (Sandbox Code Playgroud)

在加载脚本之前，您可以从后端调用 api 来获取 ngOnInit 中的 api key。

归档时间：	4 年，12 月前
查看次数：	2808 次
最近记录：	4 年，12 月前