如何从 Angular 9 正确加载和使用 gapi.iframes 库？

Question

我正在尝试将 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>

我怎样才能让它在 Angular 9 组件上工作，因为框架不支持 <script> 标签？

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

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