Question

我需要有关如何在gallery.html上显示某个图像（滑块）的帮助，例如在eighteen.html上单击1月版时，它仅在gallery.html上显示1月版，而隐藏2月和3月版。已经2天了，我没有运气如何做到这一点，我是离子新手。

这是我的代码十八。以下是HTML。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { GalleryPage } from '../gallery/gallery';

/**
 * Generated class for the EighteenPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-eighteen',
  templateUrl: 'eighteen.html',
})
export class EighteenPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad EighteenPage');
  }

toGalleryPage(){
this.navCtrl.push(GalleryPage);
}

}

<ion-content>
<ion-grid>
      <ion-row>

          <ion-col col-6 col-md-4 col-xl-3>

            <img (click)="toGalleryPage(1)" src="assets/imgs/year2018/bhcmagazine-january2018.jpg">
            <p>January</p>
          </ion-col>
  
          <ion-col col-6 col-md-4 col-xl-3>

           <img (click)="toGalleryPage(2)" src="assets/imgs/year2018/bhcmagazine-february2018.jpg">
            <p>February</p>

          </ion-col>
  
          <ion-col col-6 col-md-4 col-xl-3>
  
            <img (click)="toGalleryPage(3)" src="assets/imgs/year2018/bhcmagazine-mac2018.jpg">
            <p>March</p>

          </ion-col>

      </ion-row>
</ion-grid>
</ion-content>

这是gallery.ts和gallery.html。

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';


@IonicPage()
@Component({
  selector: 'page-gallery',
  templateUrl: 'gallery.html',
})
export class GalleryPage {
  imagesjan = [
    'January-2018_Web-page-001.jpg',
    'January-2018_Web-page-002.jpg',
    'January-2018_Web-page-003.jpg',
    'January-2018_Web-page-004.jpg',
    'January-2018_Web-page-005.jpg'


  ];
  imagesfeb = [
    'Februray-2018_Web-page-001.jpg', 
    'Februray-2018_Web-page-002.jpg', 
    'Februray-2018_Web-page-003.jpg', 
    'Februray-2018_Web-page-004.jpg',
    'Februray-2018_Web-page-005.jpg'

  ];

  imagesmarch =[
    'Mac-2018_Web-page-001.jpg', 
    'Mac-2018_Web-page-002.jpg', 
    'Mac-2018_Web-page-003.jpg', 
    'Mac-2018_Web-page-004.jpg',
    'Mac-2018_Web-page-005.jpg'
  ];
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad GalleryPage');
  }

}

<ion-header>

  <ion-navbar>
    <ion-title>gallery</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
    <ion-slides id="1" pager="true" class="image-slider-01" loop="true">
        <ion-slide *ngFor="let img of imagesjan">
          <img src="assets/imgs/year2018/january/{{img}}" class="thumb-img" imageViewer="assets/imgs/year2018/january/{{img}}"/> 
          <p>January Edition 2018</p>
        </ion-slide>
    </ion-slides>

   <ion-slides id="2" pager="true" class="image-slider-02" loop="true">
        <ion-slide *ngFor="let img of imagesfeb">
          <img src="assets/imgs/year2018/february/{{img}}" class="thumb-img" imageViewer="assets/imgs/year2018/february/{{img}}"/>
          <p>February Edition 2018</p>
        </ion-slide>
        
    </ion-slides>
    
    <ion-slides id="3" pager="true" class="image-slider-03" loop="true">
        <ion-slide *ngFor="let img of imagesmarch">
          <img src="assets/imgs/year2018/march/{{img}}" class="thumb-img" imageViewer="assets/imgs/year2018/march/{{img}}"/>
          <p>March Edition 2018</p>
        </ion-slide>
        
    </ion-slides>
</ion-content>

Answer 1

需要在步骤后更改您的代码：

十八分之一

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { GalleryPage } from '../gallery/gallery';

/**
 * Generated class for the EighteenPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-eighteen',
  templateUrl: 'eighteen.html',
})
export class EighteenPage {

  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad EighteenPage');
  }

toGalleryPage(id){
  this.navCtrl.push(GalleryPage,{id: id});
}

}

在十八分之一中不需要改变

在gallery.ts中需要更改以下

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


@IonicPage()
@Component({
  selector: 'page-gallery',
  templateUrl: 'gallery.html',
})
export class GalleryPage {
  private id:any;

  imagesjan = [
    'January-2018_Web-page-001.jpg',
    'January-2018_Web-page-002.jpg',
    'January-2018_Web-page-003.jpg',
    'January-2018_Web-page-004.jpg',
    'January-2018_Web-page-005.jpg'
  ];

  imagesfeb = [
    'Februray-2018_Web-page-001.jpg', 
    'Februray-2018_Web-page-002.jpg', 
    'Februray-2018_Web-page-003.jpg', 
    'Februray-2018_Web-page-004.jpg',
    'Februray-2018_Web-page-005.jpg'

  ];

  imagesmarch =[
    'Mac-2018_Web-page-001.jpg', 
    'Mac-2018_Web-page-002.jpg', 
    'Mac-2018_Web-page-003.jpg', 
    'Mac-2018_Web-page-004.jpg',
    'Mac-2018_Web-page-005.jpg'
  ];

  constructor(public navCtrl: NavController, public navParams: NavParams) {
     this.id= navParams.get("id");
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad GalleryPage');
  }

}

在gallery.html中需要更改以下内容

<ion-header>

  <ion-navbar>
    <ion-title>gallery</ion-title>
  </ion-navbar>

</ion-header>


<ion-content>
    <ion-slides id="1" pager="true" class="image-slider-01" loop="true" *ngIf="id == 1">
        <ion-slide *ngFor="let img of imagesjan">
          <img src="assets/imgs/year2018/january/{{img}}" class="thumb-img" imageViewer="assets/imgs/year2018/january/{{img}}"/> 
          <p>January Edition 2018</p>
        </ion-slide>
    </ion-slides>

   <ion-slides id="2" pager="true" class="image-slider-02" loop="true" *ngIf="id == 2">
        <ion-slide *ngFor="let img of imagesfeb">
          <img src="assets/imgs/year2018/february/{{img}}" class="thumb-img" imageViewer="assets/imgs/year2018/february/{{img}}"/>
          <p>February Edition 2018</p>
        </ion-slide>

    </ion-slides>

    <ion-slides id="3" pager="true" class="image-slider-03" loop="true" *ngIf="id == 3">
        <ion-slide *ngFor="let img of imagesmarch">
          <img src="assets/imgs/year2018/march/{{img}}" class="thumb-img" imageViewer="assets/imgs/year2018/march/{{img}}"/>
          <p>March Edition 2018</p>
        </ion-slide>

    </ion-slides>
</ion-content>

Ionic 3，单击另一页上的某个项目时如何显示某些图像

1 个答案: