Ionic 2+ component providing a Twitter inspired experience to visualize pictures.

GitHub：https://github.com/Riron/ionic-img-viewer

初始化项目

ionic start myApp blank

安装使用

npm install --save ionic-img-viewer

For Ionic 2 RC.0 and later:

import { IonicImageViewerModule } from 'ionic-img-viewer';

@NgModule({
  imports: [
    IonicImageViewerModule
  ]
})
export class AppModule {}

home.html：

<ion-header>
  <ion-navbar>
    <ion-title>Image Viewer</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h1>Great and flexible image viewer for Ionic 2+</h1>
    <ul>
      <li>轻触图片可全屏查看</li>
      <li>手势上下滑动可关闭全屏查看</li>
      <li>点击导航箭头可关闭视图</li>
      <li>双击可放大</li>
    </ul>
      
    <h2>Code Trigger</h2>
    <img src="http://via.placeholder.com/150x150" #imageToView (click)="onClick(imageToView)">
    
    <h2>Images in a list</h2>
    <ion-list>
      <ion-item class="listItem" *ngFor="let item of items">
        <ion-thumbnail item-left>
          <img src="http://via.placeholder.com/300x300" imageViewer>
        </ion-thumbnail>
        <p>item {{ item }}</p>
      </ion-item>
    </ion-list>

</ion-content>

home.ts：

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  items = [1, 2, 3];
  constructor(public navCtrl: NavController, public imageViewerCtrl: ImageViewerController) {}

  onClick(imageToView) {
    const viewer = this.imageViewerCtrl.create(imageToView)
    viewer.present();
  }

}