Открыть модал с изображениями

Question

Я очень новичок в ионике.

Я делаю основное ионное приложение, в котором есть список пользователей с именем пользователя и изображением (которое является массивом).

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 но мне это нужно в угловых 6 с ионным 3.

Answer 1

На основании Куртис ' ответ Мне удалось сделать слайд-шоу изображений.Пожалуйста, проголосуйте за его ответ

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>

Смотрите его в действии в этом StackBlitz

Answer 2

надеюсь, что это поможет вам

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