typescript youtube.d.ts需要在Angular 2中使用的youtube-iframe-API文件

wtlkbnrh  于 2023-02-10  发布在  TypeScript
关注(0)|答案(5)|浏览(107)

我尝试使用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文件或告诉我如何找到?

0md85ypi

0md85ypi1#

这将安装YouTube iframe的TypeScript类型:
使用Yarn:

yarn add @types/youtube

或国家预防机制:

npm install @types/youtube

正如@TaeKwonJoe在下面指出的,安装了@types/youtube后,将以下内容添加到compilerOptions下的项目tsconfig.json中:

"typeRoots": [
    "node_modules/@types"
],
"types": [ "youtube" ]
vyswwuz2

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名称空间现在可用。

playerStateChange(e) {
    switch (e.data) {
        case YT.PlayerState.PLAYING:
            console.debug('youtube playing');
            break;
        case YT.PlayerState.PAUSED:
            console.debug('youtube paused');
            break;
        case YT.PlayerState.ENDED:
            console.debug('youtube ended');
            break;
    }
}
rnmwe5a2

rnmwe5a23#

我一直在努力解决这个问题,尝试了很多方法,最后在types in tsconfig.app.json中添加了youtube,解决了这个问题。

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

我做的另一件事是:

npm install @types/youtube

这使我可以自由地使用new YT.Player(...),而不需要任何其他技巧(比如只调用我见过的window['YT'])。
如果有人能解释一下我的IDE(VS代码)是如何找到它的,而编译器却找不到,我仍然很好奇!

fnatzsnv

fnatzsnv4#

/// <reference types="youtube" />

位于使用YT命名空间的文件顶部。

cnh2zyt3

cnh2zyt35#

实际上,ng2-youtube-player提供了自己的TypeScript定义,这很不错,你可以在node_modules/ng2-youtube-player/ng2-youtube-player.d.ts下看到它们。
要使用它们,请执行以下操作:

import { YoutubePlayer, YoutubePlayerService } from 'ng2-youtube-player';

在组件类中(当然,假设您知道如何使用Zone):

@ViewChild('myElement') ref: ElementRef;
service: YoutubePlayerService = new YoutubePlayerService(this.someZone);
player: YoutubePlayer = new YoutubePlayer(this.service, this.ref);

相关问题