打开带有图像的模态

Question

我是 ionic 方面的新手。

我正在制作一个基本的离子应用程序，其中包含用户名和图像（数组）的用户列表。

Ts：

  users = [
    {
      "name": "First User",
      "image": [
        "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
      ]
    },
    {
      "name": "Second User",
      "image": [
        "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
      ]
    },
    {
      "name": "Third User",
      "image": [
        "https://ionicframework.com/img/ionic-logo-blog.png", "https://ionicframework.com/img/ionic_logo.svg", "https://ionicframework.com/img/ionic-logo-blog.png"
      ]
    },
  ]

HTML：

<div *ngFor="let user of users">
    <span> {{ user.name }} </span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button ion-button type="button" (click)="openDocument(user.image)"> View Image </button>
    <br>
</div>

工作示例： https://stackblitz.com/edit/ionic-1tzycv

在上面给出的示例中，我有一个带有View Image 的按钮，单击该按钮时，我需要使用下一个和上一个按钮以模态方式逐一显示图像。

我已经搜索了各种来源，但能够以模态形式单独加载单独的页面，

this.modalCtrl.create(SomePage, {}, { enableBackdropDismiss: false }).present();

如何显示数组的图像（意味着用户有很多图像要显示）？单击时，需要打开查看图像模态，并且该用户的图像需要一张一张地显示，在模态中单击下一步按钮时查看每个图像。

ref:https://codepen.io/anon/pen/NoGVGb 中的类似内容，但我需要 angular 6 和 ionic 3。

Answer 1

希望对你有帮助

pages/home/home.ts:

 import { Component } from '@angular/core';
 import { NavController, ModalController } from 'ionic-angular';
 import {ModelPage} from '../model/model';

 @Component({
     selector: 'page-home',
     templateUrl: 'home.html'
 })
  export class HomePage {
      constructor(public navCtrl: NavController, public modalCtrl: ModalController) {
      }

       openDocument(imageSource) {
           this.modalCtrl.create(ModelPage,{"img":imageSource}).present();
       }
  }

pages/model/model.ts（新文件）：

 import { Component } from '@angular/core';
 import { NavController,NavParams } from 'ionic-angular';
 import { ViewController } from 'ionic-angular';
 @Component({
     selector: 'page-model',
     templateUrl: 'model.html'
 })
 export class ModelPage {

   private imgs:any;
    constructor(public navCtrl: NavController,public viewCtrl:ViewController,public navParams: NavParams) {

    }

    closeModal(){
      this.viewCtrl.dismiss();
   }

   ionViewDidLoad() {
      this.imgs=(this.navParams.get("img"));

   }

 }

pages/model/model.html（新文件）：

 <ion-header>

  <ion-navbar>
   <ion-title>ModalPage</ion-title>
   <ion-buttons end>
   <button ion-button (click)="closeModal()">Close</button>
   </ion-buttons>
  </ion-navbar>

 </ion-header>
 <ion-content padding>
 <ion-list>
  <ion-item *ngFor="let img of imgs">
  <ion-thumbnail slot="start">
    <ion-img [src]="img"></ion-img>
   </ion-thumbnail>    
   </ion-item>
 </ion-list>
</ion-content>

app/app.module.ts:

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';
import  {ModelPage} from '../pages/model/model';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    ModelPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    ModelPage
  ],
  providers: [
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

工作链接 https://stackblitz.com/edit/ionic-kyyqga?embed=1&file=app/app.module.ts

Answer 2

基于Kurtis'answer，我设法制作了图片幻灯片。 请投票给他的答案

pages/model/model.ts

import { Component } from '@angular/core';
import { NavController,NavParams } from 'ionic-angular';
import { ViewController } from 'ionic-angular';

@Component({
  selector: 'page-model',
  templateUrl: './model.html'
})
export class ModelPage {

  private imgs:any;
  private name:string;
  private current: number = 0;

  constructor(public navCtrl: NavController,public viewCtrl:ViewController,public navParams: NavParams) {

  }

  closeModal(){
    this.viewCtrl.dismiss();
  }

  ionViewDidLoad() {
    this.imgs=(this.navParams.get("img"));
    this.name=(this.navParams.get("name"));
  }

  next() {
    this.current = (this.current + 1) % this.imgs.length;
  }
  prev() {
    this.current = (this.current + this.imgs.length - 1) % this.imgs.length;
  }

}

pages/model/model.html

<ion-header>
  <ion-navbar>
    <ion-title>{{ name || 'Header'}}</ion-title>
    <ion-buttons end>
      <button ion-button (click)="closeModal()">Close</button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding> 
  <ion-buttons center>
    <button ion-button (click)="prev()"><ion-icon name="arrow-back"></ion-icon></button>
      {{ current + 1 }}
    <button ion-button (click)="next()"><ion-icon name="arrow-forward"></ion-icon></button>
  </ion-buttons>
  <ng-container *ngFor="let img of imgs; let i = index">
    <ion-thumbnail *ngIf="i == current">
      {{ img }}<br>
      <img [src]="img" /><br>
    </ion-thumbnail>    
  </ng-container>

</ion-content>

在this StackBlitz查看它的实际应用