angular - ჯავასკრიპტის ვირტუალური ჯოისტიკის დამატება ionic 3-ში

მინდა ვიყო NippleJS ვირტუალური ჯოისტიკის გამოყენება ჩემს Ionic 3 პროექტში. პირველად დავაყენე ბიბლიოთეკა გამოყენებით 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. როგორ უნდა მოვეპყრო ამას?

პასუხი #1

შეიძლება დაჯერებდეს, რომ 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);

}