1
我從DefinitelyTyped npm install @types/youtube --save
錯誤Angular2組件利用DefinitelyTyped
安裝了YouTube的打字稿類型的YouTube打字稿,當我有嵌入YouTube播放器在我的角2的項目,在一個組件。 爲什麼我在調用構造函數時出錯?
--Edits-- 下面是部分代碼:
/// <reference path="../../../../node_modules/@types/youtube/index.d.ts" />
import {
Component,
OnInit
} from '@angular/core';
@Component({
selector: 'app-video',
templateUrl: './video.component.html',
styleUrls: ['./video.component.css']
})
export class VideoComponent implements OnInit {
private id: string = 'qDuKsiwS5xw';
player: YT.Player;
done = false;
youtubelink: string = 'https://www.youtube.com/embed/videoseries?list=PLbTNZNtSmrpoUVan0LVqTP3qu_9_aMr6P';
constructor() {
this.player = new YT.Player('player', {
height: 390,
width: 640,
videoId: 'M7lc1UVf-VE',
events: {
'onReady': this.onPlayerReady,
'onStateChange': this.onStateChange
}
});
}
ngOnInit() {
}
onStateChange(event) {
console.log('player state', event.data);
}
// 4. The API will call this function when the video player is ready.
onPlayerReady(event) {
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !this.done) {
setTimeout(this.stopVideo, 6000);
this.done = true;
}
}
stopVideo() {
this.player.stopVideo();
}
}
而且我有tsconfig.json文件
"files": [ "node_modules/@types/youtube/index.d.ts" ]
當我運行這個Chrome開發者控制檯,這裏是我得到的錯誤消息:
core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: YT.Player is not a constructor
TypeError: YT.Player is not a constructor
at new VideoComponent (video.component.ts:27)
at createClass (core.es5.js:10910)
at createDirectiveInstance (core.es5.js:10744)
at createViewNodes (core.es5.js:12180)
at callViewAction (core.es5.js:12626)
at execComponentViewsAction (core.es5.js:12535)
at createViewNodes (core.es5.js:12207)
at createRootView (core.es5.js:12075)
at callWithDebugContext (core.es5.js:13458)
at Object.debugCreateRootView [as createRootView] (core.es5.js:12775)
at new VideoComponent (video.component.ts:27)
at createClass (core.es5.js:10910)
at createDirectiveInstance (core.es5.js:10744)
at createViewNodes (core.es5.js:12180)
at callViewAction (core.es5.js:12626)
at execComponentViewsAction (core.es5.js:12535)
at createViewNodes (core.es5.js:12207)
at createRootView (core.es5.js:12075)
at callWithDebugContext (core.es5.js:13458)
at Object.debugCreateRootView [as createRootView] (core.es5.js:12775)
at resolvePromise (zone.js:783)
at resolvePromise (zone.js:754)
at zone.js:831
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
at Object.onInvokeTask (core.es5.js:3881)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:191)
at drainMicroTaskQueue (zone.js:595)
at <anonymous>
謝謝,Rajesh
它是一個名爲'YT'的全局變量。 –
首先,'@ types/youtube'沒有提供任何可以在Angular應用程序中使用的「組件」。看起來你對「Typescript」和「Component」的理解是錯誤的。這完全是兩回事。所有'@ types/youtube'所提供的是Youtube開發者API的打字稿定義。 – Rama
爲什麼我在調用YT的構造函數時出錯? –