vimeo/player.js - 无法读取未定义的 属性 'nativeElement'

Question

如标题所述，我在尝试集成 vimeo/player.js in my angular-cli 应用程序时遇到了一些问题。

因为我没有找到 angular 4 的任何支持库，所以我按照 README.md 中的步骤进行操作 与模块打包器一起使用.

我建了vimeo-player.component.ts:

import { Component, AfterViewInit, ViewChild} from '@angular/core';
import { Player } from '@vimeo/player';

@Component({
  selector: 'app-vimeo-video-player',
  templateUrl: './vimeo-player.component.html'
})

export class VimeoVideoComponent implements AfterViewInit {
  @ViewChild('vimeoVideoContainer') vimeoVideoContainer;
  public player: Player;

  ngAfterViewInit() {
    this.player = new Player(this.vimeoVideoContainer.nativeElement, {
        id: 19231868, // Generic Id
        width: 640
    });
  }

}

其中vimeo-player.component.html:

<div id="vimeoVideoContainer"></div>

我正在尝试在另一个模板的组件中使用它。例如在 my.component.ts 的模板中我有：

<app-vimeo-video-player></app-vimeo-video-player>

我得到了 Cannot read property 'nativeElement' of undefined，甚至以为我设法使用了 ngAfterViewInit。如果我在触发 new Player()....

之前设置超时，也会发生同样的事情

我在 vimeo/player.js issues 上发现了这个问题，但它对我没有帮助。

编辑 1:

通过@peinearydevelopment，我解决了这个特殊的错误，但现在我得到：ERROR TypeError: __WEBPACK_IMPORTED_MODULE_1__vimeo_player__.Player is not a constructor。

我做错了什么？我该如何解决这个问题？

Answer 1

将您的 div 更改为：<div #vimeoVideoContainer></div>

虽然我找不到很好的文档，但这里是 ViewChild documentation。在他们的文档中有许多不同的地方，他们使用不同的 selector 类型。正如您从文档中看到的那样，它会接受一个在这里似乎不适用的类型，因为您没有 selecting 自定义组件。上面的语法是我在使用字符串 select 元素时最常见的语法。

关于您的第二次编辑，请尝试按以下方式导入 Player import * as Player from '@vimeo/player/dist/player.js';