Angular, как я могу использовать встроенный скрипт в компоненте - PullRequest
Новая
       19

Angular, как я могу использовать встроенный скрипт в компоненте

0 голосов
/ 02 декабря 2018

Я пытаюсь настроить в Angular способ показа только проигрывателя Twitch, если поток в сети, поэтому в Документация есть этот встроенный HTML: 

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="<player div ID>"></div>
<script type="text/javascript">
  var options = {
    width: <width>,
    height: <height>,
    channel: "<channel ID>",
    video: "<video ID>",
    collection: "<collection ID>",
  };
  var player = new Twitch.Player("<player div ID>", options);
  player.setVolume(0.5);
</script>

Конечно, хотя в Angular Components мы не можем использовать теги , и я не думаю, что в настоящее время возможно использовать require или import, чтобы использовать это в моих компонентах TypeScript.

Так как же мне (без необходимости заходить в index.html) добавить эту функцию?Я понимаю, что делать после того, как смогу ссылаться на этот тег скрипта.

1 Ответ

0 голосов
/ 02 декабря 2018

Вы можете создать динамический тег сценария, но я думаю, что проще просто загрузить сценарий и поместить его в папку активов, а затем добавить сценарий в список сценариев в angular.json

или добавить сценарий.tage to index.html head section

index.html 

<script src= "https://player.twitch.tv/js/embed/v1.js"></script>

добавить это к компоненту ngOninit метод 

  ngOnInit() {
    var options = {
        width: <width>,
        height: <height>,
        channel: "<channel ID>",
        video: "<video ID>",
        collection: "<collection ID>",
      };
      var player = new Twitch.Player("<player div ID>", options);
      player.setVolume(0.5);
   }

Шаблон компонента 

<div id="<player div ID>"></div>

Вы можете найти другое решение, например угловой пакет для подергивания, который может быть более понятным

Обновленный

машинопись выдаст ошибку, такую ​​как [ts] Cannot find name 'Twitch'. [2304]в некоторых библиотеках есть файлы определения типов, но в нашем случае, если вы используете объект Twitch только в этом файле, вы можете добавить этот оператор, чтобы сообщить машинописи об Twitch объекте 

declare const Twitch: any;

, если вы хотите использовать Twitch для несколькихкомпоненты

src / global.d.ts 

 declare const Twitch: any;

окончательная рекомендация

установить npm i twitch-js и импортировать объект Twitch следующим образом

import Twitch from 'twitch-js'

это будет связано с намиbpack, поэтому вам не нужно добавлять какой-либо тег сценария в html

twitch-devs

...