Angular 7: использование внешнего скрипта в компоненте - PullRequest
Новая
       24

Angular 7: использование внешнего скрипта в компоненте

0 голосов
/ 28 марта 2019

Я пытаюсь использовать API Twitch для встраивания канала в мое веб-приложение.

Инструкции следующие: 

<html>
  <body>
    <!-- Add a placeholder for the Twitch embed -->
    <div id="twitch-embed"></div>

    <!-- Load the Twitch embed script -->
    <script src="https://embed.twitch.tv/embed/v1.js"></script>

    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
    <script type="text/javascript">
      new Twitch.Embed("twitch-embed", {
        width: 854,
        height: 480,
        channel: "monstercat"
      });
    </script>
  </body>
</html>

Я включил https://embed.twitch.tv/embed/v1.jsфайл в моей папке assets и angular.json. 

    "scripts": [
      "src/assets/twitch/twitch-embed-v1.js"
    ]

Мои файлы компонентов выглядят так: 

import Twitch from '../../../../../assets/twitch/twitch-embed-v1';

export class TwitchPlayerComponent implements OnInit {

  ngOnInit() {
    const options = {
      width: 854,
      height: 480,
      channel: '424976424',
    };
    const player = new Twitch.Embed('twitch-embed', options);
    player.setVolume(0.5);
  }

}

Сценарий отображается на панели источников в Chrome devtools, новозникает следующая ошибка:

Embed is not a constructor

Что является препятствием для правильного использования сценария?

1 Ответ

1 голос
/ 28 марта 2019

v1 в twitch еще не набрал TypeScript, это будет в v2. Вы не должны добавлять сценарии в вашу папку ресурсов. Что делать, если есть обновление от дергаться? Вам придется обновить папку с активами вручную.

В любом случае, я думаю, что для использования twitch SDK вы можете сделать следующее: 

npm install twitch-js@next

А в твоем ТС: 

import * as Twitch from 'twitch-js';

new Twitch.Embed({...});
...