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

Question

我尝试使用 youtube iframe api 通过平滑的 angular2 集成来显示和控制视频片段。尊重 typescript 的类型概念对 webpack 编译器和我很重要 :).

我的测试的快速设置：

使用 @angular/cli (Version 1.0.0-beta.32.3) to setup and install the 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 webpack 编译没有错误，即使 ng2-youtube-player 包中有未知的 YT。

我在网上仔细搜索后的问题：有人可以提供正确的 .d.ts 文件或告诉我如何找到吗？

Answer 1

实际上，ng2-youtube-player 提供了自己的 TypeScript 定义，这很好。您可以在 node_modules/ng2-youtube-player/ng2-youtube-player.d.ts.

下看到它们

要使用它们，请执行以下操作：

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

并且在您的组件中 class（当然假设您知道如何使用 Zone）：

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

Answer 2

这将为 YouTube 安装 TypeScript 类型 iframe:

使用纱线：

yarn add @types/youtube

或 NPM：

npm install @types/youtube

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

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

Answer 3

如@Myonara 所述，接受的答案涉及导入与实际解决方案无关的 youtube 上传库。

更好的是：

省略 node_modules 和 package.json
删除行import 'youtube';
安装 @types/youtube 后，将以下内容添加到您的项目 tsconfig.json 下的 compilerOptions 下：

"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;
    }
}

Answer 4

我一直在努力解决这个问题并尝试了很多事情。最后将 youtube 添加到 types in tsconfig.app.json 以修复它。

{
  "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 Code) 是如何找到它但编译器找不到的，我仍然很好奇！

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

youtube.d.ts File for the youtube-iframe-api to use in Angular 2 needed

youtube-api

typescript

youtube-iframe-api

angular

我的测试的快速设置：