如何正确加载和使用 Angular 9 中的 gapi.iframes 库？答案

【问题标题】：How to correctly load and use gapi.iframes library from Angular 9?如何正确加载和使用 Angular 9 中的 gapi.iframes 库？
【发布时间】：2020-04-03 09:17:13
【问题描述】：

我正在尝试将 google api iframe 添加到我的项目中，如Android Management API documentation 中所述：

<script src="https://apis.google.com/js/api.js"></script>
<div id="container"></div>
<script>
  gapi.load('gapi.iframes', function() {
    var options = {
      'url': 'https://play.google.com/work/embedded/search?token=web_token&mode=SELECT',
      'where': document.getElementById('container'),
      'attributes': { style: 'width: 600px; height:1000px', scrolling: 'yes'}
    }

    var iframe = gapi.iframes.getContext().openChild(options);
  });
</script>

由于框架不支持<script> 标签，如何使其在 Angular 9 组件上运行？

我已经阅读了很多关于如何使用 Injection、Renderer2 和其他东西动态加载外部 js 的答案，但是所有示例都只描述了如何加载 js 库，而不是如何从 angular 组件中实际使用它。

【问题讨论】：

标签： javascript angular iframe google-api-js-client android-management-api

【解决方案1】：

您可以在您的组件 *.ts 文件中声明一个变量，就像您的导入一样，

declare const gapi: any;

并且在您要启动 iframe 加载的函数中。

gapi.load('gapi.iframes', function() {
   var options = {
     'url': 'https://play.google.com/work/embedded/search?token=web_token&mode=SELECT',
     'where': document.getElementById('container'),
     'attributes': { style: 'width: 600px; height:1000px', scrolling: 'yes'}
   }

   var iframe = gapi.iframes.getContext().openChild(options);
});

【讨论】：