我尝试使用youtube iframe api来显示和控制视频片段,并实现平滑的angular2集成。尊重typescript的类型概念对webpack编译器和我来说都很重要:)。
测试的快速设置:
使用@angular/cli(版本1.0.0-beta.32.3)设置和安装ng2-youtube-player,然后进行两个小调整:
ng new test002
cd test002
npm install ng2-youtube-player --save-dev
app.module是根据ng2-youtube-player扩展的,但是在app.component中我有一个小的更正和一个错误:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',// app renamed to app-root
template: `
<youtube-player
[videoId]="id"
(ready)="savePlayer($event)"
(change)="onStateChange($event)"
></youtube-player>
`
})
export class AppComponent {
player: YT.Player;// Error: Cannot find namespace 'YT'
private id: string = 'qDuKsiwS5xw';
savePlayer (player) {
this.player = player;
console.log('player instance', player)
}
onStateChange(event){
console.log('player state', event.data);
}
}
对于错误,我伪造的名称空间与youtube.d.ts文件:
// dummy namespace...
export as namespace YT;
export interface Player {
name: string;
length: number;
extras?: string[];
}
现在使用ng serve,即使ng2-youtube-player包中有未知的YT,webpack也可以无错误地编译。
我的问题后,密集搜索互联网:有人可以提供正确的.d.ts文件或告诉我如何找到?
5条答案
按热度按时间0md85ypi1#
这将安装YouTube
iframe
的TypeScript类型:使用Yarn:
或国家预防机制:
正如@TaeKwonJoe在下面指出的,安装了
@types/youtube
后,将以下内容添加到compilerOptions
下的项目tsconfig.json
中:vyswwuz22#
正如@Myonara所说,公认的答案是导入一个与实际解决方案无关的youtube上传库。
更妙的是:
1.省略node_modules和package.json中的npm youtube包
1.拆下管路
import 'youtube';
1.安装@types/youtube后,将以下内容添加到compilerOptions下的项目tsconfig.json中:
"typeRoots": [ "node_modules/@types" ], "types": [ "youtube" ]
YT名称空间现在可用。
rnmwe5a23#
我一直在努力解决这个问题,尝试了很多方法,最后在types in tsconfig.app.json中添加了
youtube
,解决了这个问题。我做的另一件事是:
这使我可以自由地使用
new YT.Player(...)
,而不需要任何其他技巧(比如只调用我见过的window['YT']
)。如果有人能解释一下我的IDE(VS代码)是如何找到它的,而编译器却找不到,我仍然很好奇!
fnatzsnv4#
位于使用YT命名空间的文件顶部。
cnh2zyt35#
实际上,
ng2-youtube-player
提供了自己的TypeScript定义,这很不错,你可以在node_modules/ng2-youtube-player/ng2-youtube-player.d.ts
下看到它们。要使用它们,请执行以下操作:
在组件类中(当然,假设您知道如何使用
Zone
):