Angular如何在组件中使用嵌入脚本
Posted
技术标签:
【中文标题】Angular如何在组件中使用嵌入脚本【英文标题】：Angular how can I use embed script in Component 【发布时间】：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 的“脚本”中？ 【参考方案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>
打开您的应用并享受 :)
【讨论】：
以上是关于Angular如何在组件中使用嵌入脚本的主要内容，如果未能解决你的问题，请参考以下文章
如何将第 3 方脚本从 Web 动态加载到 Angular2 组件中
在 Angular 1.5 中，如何从子组件编译父组件的 html？