Как правильно загрузить и использовать библиотеку gapi.iframes из Angular 9?

Question

Я пытаюсь добавить в свой проект Google Api iframe, как описано в документации Android 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>

Как я могу заставить его работать компонент Angular 9, так как теги <script> не поддерживаются платформой?

Я уже прочитал много ответов о том, как динамически загрузить внешний js, используя Injection, Renderer2 и другие материалы, но все примеры только описывают, как загрузить библиотеку 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);
});