javascript - 打开带有图像的模态

Question

我对 ionic 很陌生。

我正在制作一个基本的 ionic 应用程序，其中包含带有用户名和图像(这是数组)的用户列表。

T:

  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

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

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

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

如何显示数组图像(意味着用户有很多图像要显示)？单击时，需要打开查看图像模式，并且需要一一显示该用户的图像，以便在单击模式中的下一个按钮时查看每个图像。

引用文献中类似这样的内容: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