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

Question

我正在尝试在 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 组件中我们不能使用 < script > 标签，而且我认为目前无法在我的组件 TypeScript 中使用 require 或 import 来使用它。

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

Answer 1

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

中的脚本列表会更容易

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

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>

您可能会找到另一个解决方案，例如 angular 用于 twitch 的包可以更简洁

已更新

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

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

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

Answer 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>
打开您的应用并享受 :)

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

Angular how can I use embed script in Component

node.js

typescript

twitch

angular