Angular 如何在组件中使用嵌入脚本

Question

Angular 如何在组件中使用嵌入脚本

Dan*_*ich 6 node.js typescript twitch angular

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

Run Code Online (Sandbox Code Playgroud)

当然，虽然在 Angular Components 中我们不能使用 < script > 标签，而且我认为目前不可能使用 require 或 import 在我的组件 TypeScript 中使用它。

那么我将如何添加这个功能呢？我知道在我可以实际引用该脚本标签后该怎么做。

Answer 1

mal*_*awi 5

您可以动态创建脚本标签，但我认为只需下载脚本并将其放入资产文件夹中，然后将脚本添加到脚本列表中会更容易 angular.json

或者您可以将脚本添加到index.htmlhead 部分

索引.html

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

Run Code Online (Sandbox Code Playgroud)

将此添加到组件ngOninit方法

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

Run Code Online (Sandbox Code Playgroud)

组件模板

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

Run Code Online (Sandbox Code Playgroud)

您可能会发现另一种解决方案，例如 twitch 的 angular 包可以更清洁

更新

打字稿会像[ts] Cannot find name 'Twitch'. [2304]某些库有类型定义文件一样给出错误，但在我们的情况下，如果您仅在此文件中使用 Twitch 对象，则可以添加此语句来告诉打字稿有关该Twitch对象的信息