0

在角2组件导入命名空间给了我一个构造错误导入在角2组件命名空间给了我一个构造错误

ERROR Error: Uncaught (in promise): TypeError: YT.Player is not a constructor 
TypeError: YT.Player is not a constructor 

这里是我的角度成分的定义,这是引用该命名空间

我也尝试在我的组件中使用/// <reference path,但这没有帮助。在铬/开发人员工具中,我收到错误。我能够做ng buildng serve,并且它可以成功/成功地建立/服务。

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'; 
    p: YT.Player; 
    done = false; 


    constructor() { 

    this.p = 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.p.stopVideo(); 
    } 

} 

下面是使用DefinitelyTyped

http://definitelytyped.org/docs/youtube--youtube/classes/yt.player.html

{ 
    "extends": "../tsconfig.json", 
    "compilerOptions": { 
    "outDir": "../out-tsc/app", 
    "baseUrl": "./", 
    "module": "es2015", 
    "types": ["youtube"] 
    }, 
    "exclude": [ 
    "test.ts", 
    "**/*.spec.ts" 
    ] 
} 
+0

难道你不需要导入YT.Player?我一定会尝试找到一个有角度的YouTube播放器软件包来安装,以使生活更轻松。你有没有尝试https://github.com/orizens/ng2-youtube-player?我没有用过这个。但我总是试着做最小阻力的道路! – JGFMK

回答

0

只需导入index.html的#script#标签中的外部库可以解决您的问题。

+0

是的,我从那开始。我可能会切换到脚本版本,但我想知道如果使用Typescript版本,是否有解决此问题的方法。 –

相关问题