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

【问题标题】：Angular how can I use embed script in ComponentAngular如何在组件中使用嵌入脚本
【发布时间】：2019-05-03 19:05:57
【问题描述】：

我正在尝试在 Angular 中设置一种仅在流在线时才显示 Twitch 播放器的方式，因此在 Documentation 中有这个内联 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 组件中我们不能使用标签，而且我认为目前无法在我的组件 TypeScript 中使用 require 或 import 来使用它。

那么我该如何添加这个功能呢？在我可以实际引用该脚本标记后，我明白该怎么做。

【问题讨论】：

为什么不将脚本包含在 angular.json 的“脚本”中？

标签： node.js angular typescript twitch

【解决方案1】：

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

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

index.html

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

将此添加到组件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>

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

更新

typescript 会给出类似[ts] Cannot find name 'Twitch'. [2304] 的错误，一些库有类型定义文件，但在我们的例子中，如果你在这个文件中使用 Twitch 对象，你可以添加这个语句来告诉 typescript 关于Twitch 对象

declare const Twitch: any;

如果你想在多个组件上使用 Twitch

src/global.d.ts

 declare const Twitch: any;

最终推荐

安装 npm i twitch-js 并像这样导入 Twitch 对象

import Twitch from 'twitch-js'

这会被webpack打包，所以你不需要在html中添加任何脚本标签。

twitch-devs

【讨论】：

第二个不起作用，它仍然显示'找不到名称'Twitch''
第一种方法似乎也没有做任何事情，它仍然与上述评论相同：/
@DanielTurcich 抱歉忘了提declare const Twitch: any
当我将它包含在头部或下载/包含它时，我会收到ERROR TypeError: Twitch.Player is not a constructor

【解决方案2】：

为此苦苦挣扎了一段时间。我的脚本是异步的，最终我发现了postscribe package。像魔术一样工作。

npm install --save postscribe

在代码中：

import postscribe from 'postscribe'

//The script you want to load
const script = '<script src="https://darksky.net/map-embed/@radar,41.88,-87.62,10.js?embed=true&timeControl=false&fieldControl=false&defaultField=radar"></script>';

postscribe('#yourDivName', script);

【讨论】：

【解决方案3】：

从https://embed.twitch.tv/embed/v1.js手动下载v1.js脚本
创建新文件夹src/twitch/ 并将v1.js 脚本添加到其中
将"src/twitch/v1.js" 添加到angular.json 中的scripts 数组中
在src/twitch/ 中创建一个新文件twitch.d.ts
将declare const Twitch: any; 添加到twitch.d.ts

现在可以在任何地方使用 Twitch 库无需导入任何模块，如下所示：

ngOnInit(): void {
  new Twitch.Embed('containerId', {
    channel: 'asmongold',
    height: 500,
    width: 400,
 });
}

【讨论】：

【解决方案4】：

这就是我的工作方式：

从Twitch JS URL复制所有内容。
在您的资产文件夹中创建文件twitch.js并粘贴所有内容。 (src/assets/scripts/twitch.js)。
在您的组件中添加import Twitch from 'src/assets/scripts/twitch.js'。
同样在您的组件中添加 twitch 初始化代码

您的组件应如下所示：

import { Component, OnInit } from '@angular/core';
import Twitch from 'src/assets/scripts/twitch.js';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  embedTwitch! : any;
  
  constructor() { }

  ngOnInit() {
    this.embedTwitch = new Twitch.Embed("twitch-embed", {
      width: 854,
      height: 480,
      channel: "monstercat"
    });
  }

}

你的组件 html 必须有 twitch 占位符<div id="twitch-embed"></div>
打开您的应用并享受 :)

【讨论】：