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版本,是否有解決此問題的方法。 –

相關問題