为什么 Ionic 4 Ion-Slides 突然停止正常显示？

Question

我有一个 Ionic 4 项目，该项目已经实现了离子幻灯片。一切都很好，直到最近对 Ionic 进行了一些更新（不到一个月前），然后它们突然停止工作了。

在第一次加载时，它们似乎很好，但在之后的任何加载中：

寻呼机不工作或不显示
图片大小不正确
滚动有效，但不会像应有的那样将幻灯片对齐到中心

第一次加载工作： image of ion-slides as intended

第二次加载没有： image of ion-slides broken

没有错误消息或警告，以下所有代码在 1 个月前都运行良好，此后未进行任何更改。它只是随机损坏。

HTML:

<ion-slides #slides pager="true">
  <ion-slide *ngFor="let option of options; let i = index">
    <ion-card mode="md" [ngStyle]="{'background': borderColors[i]}">
      <img style="object-fit: contain; border-radius: 20px; padding: 2px;" [src]="option.imageUrl">
    </ion-card>
  </ion-slide>
</ion-slides>

TS:

import { Component, Input, ViewChild } from "@angular/core";
import { IonSlides } from "@ionic/angular";
import { ContestOption } from "src/app/models/contest-model";

@Component({
  selector: "app-results-swiper",
  templateUrl: "./results-swiper.component.html",
  styleUrls: ["./results-swiper.component.scss"]
})
export class ResultsSwiperComponent {
  @Input() options = [
    { id: "null", imageUrl: "null", votes: 0 },
    { id: "null", imageUrl: "null", votes: 0 }
  ] as Array<ContestOption>;
  @Input() borderColors = [];

  @ViewChild("slides", null) slides: IonSlides;

  constructor() {}
}

我尝试进一步隔离问题。这 HTML 仍然失败：

<ion-slides #slides pager="true" [options]="slidesOpts">
  <ion-slide>
    Hello
  </ion-slide>
  <ion-slide>
    Hello Again
  </ion-slide>
</ion-slides>

重申一下，关于此组件的所有内容不久前都可以正常工作。然后我在最近的更新中开始在我的项目中看到 Ionic CSS 弃用警告。它们看起来像这样：

[DEPRECATED][CSS] Ionic CSS attributes are deprecated.
Replace:
'<div text-center>'

With:
'<div class="ion-text-center">'

自从那次更新后，离子载玻片坏了，决定停止工作。请帮忙！

Answer 1

通过更广泛的错误测试，我发现问题不在于离子幻灯片，而在于页面加载。我没有提供足够的信息来解决问题。

离子幻灯片在离子模式中打开，这导致幻灯片在页面加载完成之前呈现。我的解决方案是这样的：

在 TS 文件中创建变量 viewEntered = false;
使用 Ionic 生命周期钩子，检测视图何时完成进入

ionViewDidEnter() {
    this.viewEntered = true;
}

如果在 HTML 中输入视图，则使用 ngIf 在离子载玻片上检测。

<my-custom-component *ngIf="viewEntered"></my-custom-component>

为什么 Ionic 4 Ion-Slides 突然停止正常显示？

Why Did Ionic 4 Ion-Slides Suddenly Stop Displaying Properly?

angular

ionic-framework

ionic4

ion-slides