如何让@vimeo/player参与我的Angular2/Typescript项目？

Question

题:

我如何@ VIMEO /播放器在我的Angular2 /打字稿项目(特别是Ionic2)工作？

描述:

试图让vimeo 播放器使用Angular2/Typescript.

npm install --save @vimeo/player

根据他们的文档,库可以像这样使用:

如果您正在使用webpack或汇总等模块捆绑器,则导出的对象将是Player构造函数(与它附加到window.Vimeo的浏览器不同):

import Player from '@vimeo/player';

const player = new Player('handstick', {
    id: 19231868,
    width: 640
});

player.on('play', function() {
    console.log('played the video!');
});

哪个看起来很有前途!但是不起作用.

我尝试过的:

我安装了@vimeo/player,@types/vimeo__player 我在Ionic2应用程序中创建了一个播放器组件.

player.ts:

import {Component, ViewChild} from '@angular/core';
import {NavController} from "ionic-angular/index";

//noinspection TypeScriptCheckImport,TypeScriptCheckImport
import Player from "@vimeo/player";


@Component({
  selector: 'player-component',
  templateUrl: 'player.html'
})
export class PlayerComponent {

  @ViewChild('player_container') playerContainer;
  private player: Player;

  constructor(public navCtrl: NavController){}

  ngAfterViewInit() {
    // child is set
    this.player = new Player(this.playerContainer);
    console.log(Player);
  }

}

我使用view child,但我也试过了元素的ID.

player.html

<div #player_container></div>

并得到以下错误:

未捕获(承诺):TypeError:您必须传递有效元素或有效ID.Player @ http:// localhost:8100/build/main.js:102846:32 ngAfterViewInit @ http:// localhost:8100/build/main.js:74715:80 callProviderLifecycles @ http:// localhost:8100/build/main.js:11417:33 callElementProvidersLifecycles @ http:// localhost:8100/build/main.js:11392:35 callLifecycleHooksChildrenFirst @ http:// localhost:8100/build/main.js:11376:47 checkAndUpdateView @ http:/ /localhost:8100/build/main.js:12408:36 callWithDebugContext @ http:// localhost:8100/build/main.js:13462:47 detectChanges @ http:// localhost:8100/build/main.js:10474 :81 _viewAttachToDOM @ http:// localhost:8100/build/main.js:43884:53 _transition @ http:// localhost:8100/build/main.js: 43976 :34 onInvoke @ http:// localhost:8100/build/main.js:4406:43 运行@ http:// localhost:8100/build/polyfills.js:3:4146 http:// localhost:8100/build/polyfills.js:3:13734 onInvokeTask @ http:/ /localhost:8100/build/main.js:4397:47 runTask @ http:// localhost:8100/build/polyfills.js:3:4841 o @ http:// localhost:8100/build/polyfills.js:3 :1898 调用@ http:// localhost:8100 /构建/ polyfills.js:3:10674

正如您所看到的,它会在运行时编译但崩溃.

@ types/vimeo__player似乎没有完成,甚至在导入时似乎都没有被注意到@vimeo/player

github关于vimeo__player的问题似乎表明这是真的.

看起来模块解析正确地将其解析为JS模块,但仅仅因为它没有首先找到类型.你确定你已正确包含这些类型吗？--listFiles会告诉你它是否包含在内.

附加功能:

发布在Vimeo的github播放器页面上打开.

Answer 1

您的问题不是由@types/vimeo__player它与您的构建系统/配置相关.

打字稿类型定义永远,永远,永远不会影响运行时的行为.甚至编译时错误也没有比在控制台中显示红色更有效,JavaScript仍然会被发出.

看看你已经得到的堆栈跟踪,我们也可以说它Player是有效导入的,因为你说没有编译时错误,所以在构建方面的一切都很好.

事实上,错误说明了一切:TypeError: You must pass either a valid element or a valid id..

Player说它期待一个HTMLElement.

问题是,你使用的@ViewChild()是Angular.当您查询本机元素时,此装饰器将返回一个包装器.这个包装器是类型的ElementRef,并且有一个名为nativeElement包含原始DOM元素的属性.

所以不要这样做:

this.player = new Player(this.playerContainer);

做这个:

this.player = new Player(this.playerContainer.nativeElement);

但是你现在可能会想"为什么TypeScript没有产生类型错误,因为我没有传递一个原生元素？" .这是一个很好的问题,我没有足够的数据来确定,但我认为你的导入可能不正确.

代替:

//noinspection TypeScriptCheckImport,TypeScriptCheckImport
import Player from "@vimeo/player";

你能尝试这样做吗？

import { Player } from '@vimeo/player';

查看.d.ts文件,看起来该Player是一个命名导出.但是你是对的,@ vimeo/player的类型定义是不完整的,或者与JavaScript库不同步.你应该知道TypeScript中的那种类型的问题,虽然这不是每天都会发生;)

Answer 2

对于标准打字稿项目，此导入语句有效。

import * as Player from "@vimeo/player/dist/player.js";