错误Angular2组件利用DefinitelyTyped

Question

我从DefinitelyTyped npm install @types/youtube --save

安装了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

Answer 1

我不得不使用ng2 youtube player：https://www.npmjs.com/package/ng2-youtube-player