离子幻灯片上每个按钮上的单击事件

Question

我有各种幻灯片，每个幻灯片都有点赞和评论按钮，当我单击特定幻灯片之类的按钮时，我必须这样做，然后该按钮图像会发生变化，或者它会像你一样显示和 20 个喜欢。

我面临的问题是，当我点击类似按钮时，它也会影响其他幻灯片，例如按钮。当我刷新页面时，即使我已经喜欢它，它仍然显示为特定幻灯片启用了按钮。

我的代码在下面

.html

<ion-slides #slider (ionDidChange)="SlideChanged()" [options]="_sliderOptions" id="ionSlider" class="main-slider">
    <ion-slide #slide *ngFor="let robot of _robots; let i = index">
      <ion-grid class="content-info-item">
          <img [src]="sanitizer.bypassSecurityTrustResourceUrl(photoPicArray[i])" class="postimage" />
        <div class="content-info-content">
          <p class="posttime">{{robot.Created | date:'medium'}}</p>
          <h1 class="GuardianEgyp-Regular-Web heading-title" (click)="goToLongStory(i)">{{robot.Title}}</h1>
          <p class="shortstory GuardianEgyp-Light-Web" (click)="goToLongStory(i)">{{robot.SortStory}}</p>
        </div>
        <div class="like-info-icon" *ngIf="ionicNamedColor == false">
            <button (click)="toggleNamedColor(robot.Id,i)" color="primary" block>
                <img src="assets/imgs/like.png">
           </button>
        </div>
        <div class="like-info-content GuardianEgyp-Light-Web">
          <p item-end><span *ngIf="ionicNamedColor == true" >You and</span><span>{{robot.TotalLikesId}}</span> Likes</p>
      </div>

      <div class="like-info-icon-box">
          <div class="like-info-icon">
            <img class="" width="24" src="assets/imgs/comments1.png" alt="longstory" title="View More">
          </div>
          <div class="like-info-content GuardianEgyp-Light-Web">
            <p>
              <span>{{robot.TotlaCommentsId}}</span> Comments</p>
          </div>
        </div>
      </ion-grid>

.ts 文件

public ionicNamedColor: boolean = false;
  public likeArray: any[] = [];


    public toggleNamedColor(articleID: string, indexID: string): void {
        if (this.ionicNamedColor == false) {
          this.ionicNamedColor = true;
        }
        else {
          this.ionicNamedColor = false;
        }
}

SlideChanged() {
    let currentSlide = this.slider.getActiveIndex();
    let slideElements = this.slides.toArray();

    let targetSlide = slideElements[currentSlide];
    console.log(targetSlide);
  }

Answer 1

您可以从 .ts 中为您的 _robots JSON 对象添加新密钥，以下是提示：

在您的 .html 文件中

<ion-slides #slider (ionDidChange)="SlideChanged()" [options]="_sliderOptions" id="ionSlider" class="main-slider">
    <ion-slide #slide *ngFor="let robot of _robots; let i = index">
      <ion-grid class="content-info-item">
          <img [src]="sanitizer.bypassSecurityTrustResourceUrl(photoPicArray[i])" class="postimage" />
        <div class="content-info-content">
          <p class="posttime">{{robot.Created | date:'medium'}}</p>
          <h1 class="GuardianEgyp-Regular-Web heading-title" (click)="goToLongStory(i)">{{robot.Title}}</h1>
          <p class="shortstory GuardianEgyp-Light-Web" (click)="goToLongStory(i)">{{robot.SortStory}}</p>
        </div>
        <div class="like-info-icon" *ngIf="robot.isLiked == false">
            <button (click)="toggleNamedColor(robot.Id, i)" color="primary" block>
                <img src="assets/imgs/like.png">
           </button>
        </div>
        <div class="like-info-content GuardianEgyp-Light-Web">
          <p item-end><span *ngIf="robot.isLiked == true" >You and</span><span>{{robot.TotalLikesId}}</span> Likes</p>
      </div>

      <div class="like-info-icon-box">
          <div class="like-info-icon">
            <img class="" width="24" src="assets/imgs/comments1.png" alt="longstory" title="View More">
          </div>
          <div class="like-info-content GuardianEgyp-Light-Web">
            <p>
              <span>{{robot.TotlaCommentsId}}</span> Comments</p>
          </div>
        </div>
      </ion-grid>

在您的 .ts 文件中

let _robots = [
  {
    Id : "1",
    Title: "your title...",
    SortStory: "SortStory...",
    ...
  },{
    Id : "2",
    Title: "your title...",
    SortStory: "SortStory...",
  }
]

function addKeyValue(obj, key, data){
  obj[key] = data;
}


_robots.map(function(person) {
  return addKeyValue(person, 'isLiked', 'false');
});


public toggleNamedColor(indexID): void {
    _robots[indexID].isLiked = true;
}

希望对您有所帮助。

Answer 2

您对数组的所有项目使用相同的变量 ionicNamedColor。

您可以尝试在机器人对象 ionicNamedColor 中再创建一个变量，并更改特定索引对象的颜色。

例如：*ngIf="robot.ionicNamedColor == false"

Answer 3

在 Ionic 4 Angular 8 项目中实现：

HTML：

 <ion-slides pager="true" #slides>
    <ion-slide>
        <div>Slide page 1</div>
    </ion-slide>
    <ion-slide>
        <div>Slide page 2</div>
    </ion-slide>
    <ion-slide>
        <div>Slide page 3</div>
    </ion-slide>
 </ion-slides>

TypeScript：

 @ViewChild('slides', { static: true }) slides: IonSlides;

ngOnInit() {
    this.slides.ionSlidesDidLoad.subscribe((e) => {
        var swiperElements: HTMLCollection =
            this.elem.nativeElement.querySelectorAll(".swiper-pagination-bullet");
        var self = this;
        Array.from(swiperElements).forEach(function(element) {
            element.addEventListener("click", function() {
                self.goToSliderIndex(this, self);
            });
        });
    })
}

goToSliderIndex(child, self) {
    var parent = child.parentNode;
    var bulletIndex = Array.prototype.indexOf.call(parent.children, child);
    this.slides.slideTo(bulletIndex, 2000);
}