Riron / ionic-img-viewer

Ionic 2+ component providing a Twitter inspired experience to visualize pictures.
MIT License
283 stars 118 forks source link

Ionic 3 not functioning - directive nor programmatically #83

Closed jmmclean closed 7 years ago

jmmclean commented 7 years ago

Please provide you version information :

Dependency Version
ionic 3
angular 4
ionic-img-viewer 2.6.1

Have you checked...

Symptom:

When executing as per readme.md, I am unable to enlarge an image upon click. This issue is observed for directive and js/ts

DEBUG:

No Errors displayed from directive usage, but no functionality either

Stack Trace from js/ts:

TypeError: Cannot read property 'create' of undefined
    at GalleryComponent.webpackJsonp.596.GalleryComponent.presentImage (http://localhost:8100/build/1.js:184:48)
    at Object.eval [as handleEvent] (ng:///HomeVendorPageModule/GalleryComponent.ngfactory.js:37:24)
    at handleEvent (http://localhost:8100/build/vendor.js:12421:138)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:13713:42)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:13301:12)
    at dispatchEvent (http://localhost:8100/build/vendor.js:9321:21)
    at http://localhost:8100/build/vendor.js:9913:20
    at HTMLImageElement.<anonymous> (http://localhost:8100/build/vendor.js:33426:53)
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9967)
    at Object.onInvokeTask (http://localhost:8100/build/vendor.js:4647:37)

DEBUG-CODE:

import { Component } from '@angular/core';
import { ImageViewerController } from 'ionic-img-viewer';

/**
 * Generated class for the GalleryComponent component.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
 * for more info on Angular Components.
 */
@Component({
  selector: 'gallery',
  templateUrl: 'gallery.html'
})
export class GalleryComponent {
  public images:any;
  private _imageViewerCtrl: ImageViewerController;

  constructor() {
    console.log('Hello GalleryComponent Component');
    this.images = ['1.jpg', '2.jpg', '3.jpg'];
  }

  presentImage(myImage) {
    const imageViewer = this._imageViewerCtrl.create(myImage);
    imageViewer.present();
  }

}
tylkomat commented 7 years ago

@jmmclean According to the documentation you need to inject the ImageViewerController via constructor. Try moving the ImageViewerController instantiation into the constructor like this:

  constructor(private _imageViewerCtrl: ImageViewerController) {
jmmclean commented 7 years ago

Im going to go ahead and blame coders block on this one...i ended up just making page and importing IonicImageViewerModule. Thanks for the response!