时间戳

首页 > 解决方案 > 如何正确加载和使用 Angular 9 中的 gapi.iframes 库？

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

问题描述

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

<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 组件中实际使用它。

标签： javascriptangulariframegoogle-api-js-clientandroid-management-api

解决方案

您可以在您的组件 *.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);
});

推荐阅读