Question

我尝试使用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服务webpack正在编译而不会出错，即使ng2-youtube-player包中存在YT未知。

我在互联网上进行密集搜索后的问题：有人可以提供正确的.d.ts文件或告诉我如何查找吗？

Answer 1

所以这个问题引用了move_window_up_key，我去寻找它的TypeScript声明。后来澄清说OP正在寻找API本身的*_key文件。

使用纱线：

ng2-youtube-player

或NPM：

d.ts

第一行安装API，第二行安装打包，看起来很完整。

您可以使用以下方式导入它：

yarn add youtube
yarn add @types/youtube

根据API使用。我使用VS Code对此进行了测试，并在使用时获得了非常好的代码洞察力。

Answer 2

正如@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 3

我一直在努力解决这个问题并尝试了很多东西。最后将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代码）如何找到它的解释，但编译器仍然不会感到好奇！。

Answer 4

实际上，heatmap.plotly <- plot_ly(x=colnames(mat),y=rownames(mat),z=mat,type="heatmap",colors=colorRamp(c("darkblue","white","darkred"))) htmlwidgets::saveWidget(heatmap.plotly,"heatmap.plotly.html")提供了自己的TypeScript定义，这很好。您可以在ng2-youtube-player下看到它们。

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

node_modules/ng2-youtube-player/ng2-youtube-player.d.ts

在您的组件类中（当然假设您知道如何使用import { YoutubePlayer, YoutubePlayerService } from 'ng2-youtube-player';）：

Zone

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

我的测试快速设置：

4 个答案: