ionic2 图片预览

1. 插件安装

github地址：https://github.com/nikini/ionic-gallery-modal

安装：

npm install ionic-gallery-modal --save

 

2.插件引入(这个插件在页面的module.ts中引入会报错)

app.modules.ts

import * as ionicGalleryModal from 'ionic-gallery-modal';

import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';



imports: [

    ionicGalleryModal.GalleryModalModule,

    ...

],



providers: [

    ...

    {

        provide: HAMMER_GESTURE_CONFIG,

        useClass: ionicGalleryModal.GalleryModalHammerConfig,

    },

    ...

]

 

3.插件使用

需要使用的pages的html:

<p (click)="openModal(image)" *ngIf="image">

<img src="{{image }}">

</p>

ts:

import { ModalController } from 'ionic-angular';

import { GalleryModal } from 'ionic-gallery-modal';



// 这个插件 要求 图片数组是以下形式的, 所以需要一个转换

private photos: any[] = [];



imageArray: any[] = [

'/assets/to-user.jpg',

'/assets/user.jpg',

'/assets/yuyin.png'

];







constructor(private modalCtrl: ModalController,

....,) {

// Get the navParams toUserId parameter





}



// 把图片数组转换成插件需要的数组

changeArrayToGallery(array) {

for (let i = 0; i < array.length; i++) {

var object = { "url": array[i]};

this.photos.push(object);

}

}



// js通过元素 获取在数组中的下标位置

getIndexOfArray (object) {

var index = this.imageArray.indexOf('/assets/yuyin.png');

return index;

}



openModal(image) {



// 获取当前点击图片所在数组下标

var index = this.getIndexOfArray(image);

// 图片数组转换成插件需要的数组

this.changeArrayToGallery(this.imageArray);



// 显示图片预览

let modal = this.modalCtrl.create(GalleryModal, {

photos: this.photos,

initialSlide: index,

});

modal.present();

}