angular - 在ionic 3中添加JavaScript虚拟游戏杆

我想在我的离子3项目中使用NippleJS virtual joystick。我首先使用npm install nipplejs --save安装库。然后，我在.html和.ts文件中添加了一些内容，如下所示。
HTML格式：

<ion-header>
  <ion-navbar>
    <ion-title>
      Test Virtual Joystick
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <div id="zone_joystick"></div>

</ion-content>

TS公司

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { nipplejs } from 'nipplejs'

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {
    var options = {
        zone: document.getElementById('zone_joystick')
    };

    var manager = nipplejs.create(options);
  }
}

但是，我得到Cannot read property 'create' of undefined TypeError。我该怎么处理？

最佳答案

似乎nippleJS不是基于ES2015标准构建的，因此您需要这样导入它：
首先，安装它：npm install nipplejs --save
然后像这样导入
import nipplejs from 'nipplejs';
使用它
nipplejs.create(...);
编辑
就像他在评论中提到的@matthias247一样，由于您需要在选项中包含来自dom的元素，您应该将该代码放入ionViewDidLoad生命周期挂钩（在执行构造函数时dom还没有准备好）：

ionViewDidLoad() {

  // Now we know the DOM is ready
  let options = {
    zone: document.getElementById('zone_joystick')
  };

  let manager = nipplejs.create(options);

}