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

Question

如标题所述，我在尝试集成 vimeo/player.js 时遇到了一些麻烦在我的 angular-cli申请。

由于我还没有找到 Angular 4 的任何支持库，所以我按照README.md 中使用模块 bundler 中的步骤进行操作。 p>

我构建了 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，我解决了这个特殊的错误，但现在我得到了:错误类型错误:__WEBPACK_IMPORTED_MODULE_1__vimeo_player__.Player 不是构造函数。

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

Answer 1

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

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

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