angular - Angular 7:在组件中使用外部脚本
问题描述
我正在尝试使用 Twitch API 在我的网络应用程序中嵌入一个频道。
说明如下:
<html>
<body>
<!-- Add a placeholder for the Twitch embed -->
<div id="twitch-embed"></div>
<!-- Load the Twitch embed script -->
<script src="https://embed.twitch.tv/embed/v1.js"></script>
<!-- Create a Twitch.Embed object that will render within the "twitch-embed" root element. -->
<script type="text/javascript">
new Twitch.Embed("twitch-embed", {
width: 854,
height: 480,
channel: "monstercat"
});
</script>
</body>
</html>
我已将该https://embed.twitch.tv/embed/v1.js
文件包含在我的assets
文件夹和 angular.json 中。
"scripts": [
"src/assets/twitch/twitch-embed-v1.js"
]
我的组件文件如下所示:
import Twitch from '../../../../../assets/twitch/twitch-embed-v1';
export class TwitchPlayerComponent implements OnInit {
ngOnInit() {
const options = {
width: 854,
height: 480,
channel: '424976424',
};
const player = new Twitch.Embed('twitch-embed', options);
player.setVolume(0.5);
}
}
该脚本出现在 Chrome devtools 的源面板中,但会产生以下错误:
Embed is not a constructor
正确使用脚本的障碍是什么?
解决方案
twitch 的 v1 还没有 TypeScript 类型,这将在 v2 中出现。您不应该将脚本添加到您的资产文件夹中。如果 twitch 有更新怎么办?您将不得不手动更新您的资产文件夹。
无论如何,我认为,要使用 twitch SDK,您可以执行以下操作:
npm install twitch-js@next
在你的 TS 中:
import * as Twitch from 'twitch-js';
new Twitch.Embed({...});
推荐阅读
- excel - 如何在VBA中检索字典的键值中的数组传递?
- java - @Inject 和 java.security.Provider 组合是否提供了关于其范围配置的实例?
- python - 排序数组的平方,为什么 sorted() 方法比 O(n) 方法快?
- python - 散景:带分离 y 轴的 Wheel_Zoom
- php - 是否可以在 Laravel 中获取数据透视表与另一个表的关系?
- c# - 是否有名称空间的所有保留关键字的列表?
- python - 如何在PDF中附加多个文件?
- java - Drools 在 where 子句中获取 List 的第一个元素
- python - 如何使用python阻止域
- git - 在 github.com 上查找提交所属的分支