ionic3 圖片（輪播）預覽 ionic-gallary-modal組件使用方法

一、效果展示

使用方法：

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<object> = [];
    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); }