代码之家 › 专栏 › 技术社区 › Maniraj Murugan

带图像的开放模式

ionic3 ionic-framework typescript angular javascript

Maniraj Murugan · 技术社区 · 7 年前

  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();

如何显示阵列图像(意味着用户有很多图像要显示)?单击查看图像模式需要打开,并且需要逐个显示该用户的图像查看模式中单击下一步按钮的每个图像。

https://codepen.io/anon/pen/NoGVGb 但我需要角6和离子3。

2 回复 | 直到 7 年前

yunzen 7 年前

希望对你有帮助

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

yunzen 7 年前

基于 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