一、效果展示

使用方法：

1.npm安装ionic-gallary-modal扩展模块

npm install ionic-gallery-modal --save

2.在app.module.ts根模块中导入图片预览模块 ionic-gallary-modal 和 浏览器手势事件模块 HAMMER_GESTURE_CONFIG

import * as ionicGalleryModal from 'ionic-gallery-modal';import { HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

@NgModule({

declarations: [

MyApp

],

imports: [

......

BrowserModule,

ionicGalleryModal.GalleryModalModule,

.....

],

bootstrap: [IonicApp],

entryComponents: [

MyApp

],

providers: [

......

{

provide: HAMMER_GESTURE_CONFIG,

useClass: ionicGalleryModal.GalleryModalHammerConfig,

}

]

})

3、在实例页面（组件）中配置封装调用方法：

根据具体需求可将下面代码封装在Common.ts公共服务库中，以便随时调用即可

import { ModalController } from 'ionic-angular';

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

/**

* (单图)多图预览model组件封装

* @param photoData 输入图片地址

* @param {string} key 对象图片url对应的属性名程

*/

public photoViews(photoData,key = ''){

let photos:Array = [];

let obj = {};

// 单张图片时（photoData为一个图片地址字符串且不为空）

if(photoData && typeof(photoData) == "string"){

obj = {};

obj['url'] = photoData;

photos.push(obj);

}

console.log(photoData)

// 多张图片时（photoData为图片地址字符串数组）

if(photoData instanceof Array){

console.log(photoData)

photoData.forEach(function(item,index,array){

obj = {};

// photoData 为字符串数组时（即key不存在时）

if(key == '' && item){

obj['url'] = item;

photos.push(obj);

}

// photoData 为对象数组时（即key存在时）

console.log(item[key])

if(key != '' && item[key]){

obj['url'] = item[key];

photos.push(obj);

}

});

}

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

photos: photos,

initialSlide: 0

});

modal.present();

}

4、实际调用：

import {CommonProvider} from "../../providers/common";

constructor(public navCtrl: NavController,

    public Common:CommonProvider) {

}

/**

* 图片预览调用

* @param photoData 输入预览图片数据

* @param key  图片url对应的属性名

*/

public viewPhoto(photoData,key){ this.Common.photoViews(photoData,key); }

ps:转自：http://www.cnblogs.com/hsl-shiliang/p/8707545.html