ionic4 中不显示幻灯片

Question

我正在将源代码从 ionic3 迁移到 ionic4。

以下幻灯片页面在ionic4中不显示。
我该如何解决？
希望你能告诉我。

（附加信息）
我认为，这似乎是样式有问题，它出现在其他地方。
所以，我也会向 SCSS 添加信息。
为什么我不能像在 ionic4 中那样使用 ionic3 样式？

（更多信息）
如果我注释掉所有 walkthrough.page.scss，图像将出现在模态框的一部分中。

Current status of the target screen

app.component.ts（调用页面）

    ...
async error => {

const walkthroughModal = await this.modalCtrl.create({component: WalkthroughPage, componentProps:{prev_page: 'login'} });
    await walkthroughModal.present();
}
    ...

walkthrough.page.ts

    @Component({
        selector: 'page-walkthrough',
        templateUrl: 'walkthrough.page.html',
        styleUrls: ['walkthrough.page.scss'],
        providers: [CustomNativeStorage]
    })
    export class WalkthroughPage {
    ...

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

walkthrough.page.html

<ion-slides pager="true">
    <ion-slide *ngFor="let slide of walkthroughSlides" [style.background-image]="slide.img">
        <div class="walkthrough-content-card">
            <div class="text-container">
                <div class="walkthrough-title">
                    {{ slide.title }}
                </div>
                <div class="walkthough-text">
                    {{ slide.text }}
                </div>
            </div>
            <div class="button-container">
                <ion-button class="button_continue" color="bright" (click)="slideNext()">
                    CONTINUE
                </ion-button>
            </div>
        </div>
    </ion-slide>
</ion-slides>

walkthrough.page.scss

$iphone4: "(device-width: 320px) and (device-height: 480px)";
$iphone5: "(device-width: 320px) and (device-height: 568px)";
$iphone6_7: "(device-width: 375px) and (device-height: 667px)";

.ios, 
.md {

    .swiper-slide.swiper-slide-active{
      width: 100% !important;
     }

    ion-slide {
      background-size: cover;
      background-position: top center;
    }

    .walkthrough-content-card{
      background-color: rgba(255,255,255,0.85);
      position: absolute;
      width: 100%;
      bottom: 0px;
    }

    .text-container{        
        padding: 5%;
      .walkthrough-title{
        font-size: 1.6rem;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .walkthough-text{
        font-size: 1.5rem;
        margin-bottom: 30px;
      }
    }

    .button-container{
      width: 100%;
      text-align: center;
      margin-bottom: 15px;

      .button_continue{
        min-width: 50%;
        @extend .remove-text-transform,
        .remove-button-curves !optional;
      }
    }
}

.swiper-pagination-fraction, .swiper-pagination-custom,
 .swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 10%;
}
.swiper-pagination-bullet-active{
  background: #FF9800;
}
.slide-zoom{
  height: 100% !important;
}


@media #{$iphone4}{
    .swiper-pagination-fraction, .swiper-pagination-custom,
     .swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 14.5% !important;
}
}
@media #{$iphone5}{
    .swiper-pagination-fraction, .swiper-pagination-custom, 
    .swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 11.5% !important;
}
}
@media #{$iphone6_7}{
    .swiper-pagination-fraction, .swiper-pagination-custom, 
    .swiper-container-horizontal > .swiper-pagination-bullets{
  bottom: 10% !important;
}
}

global.scss

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";

//Universal Styles
.ios .japanese-fonts {
  font-family: "Hiragino Sans", "HiraKakuProN", sans-serif !important;
}

.md .japanese-fonts {
  font-family: "Noto Sans CJK", "モトヤフォント", sans-serif !important;
}

.ios,
.md {

  body {
    padding-top: constant(safe-area-inset-top);
    padding-right: constant(safe-area-inset-right);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-left: constant(safe-area-inset-left);
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }

  .title-center {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 90px 1px;
    width: 100%;
    height: 100%;
    text-align: center;
  }

  .back-button-style {
    z-index: 10;
    margin-left: 5px;
    padding-left: 0px;
  }

  .remove-button-curves {
    border-radius: 0px;
  }

  .remove-text-transform {
    text-transform: none;
  }

  .remove-box-shadow {
    box-shadow: none;
  }

  .explanation-text {
    width: 100%;
    font-size: 18px;
    text-align: center;
    padding: 20px 40px;
    color: var(--ion-color-text_gray);
  }

  ::-webkit-scrollbar,
  *::-webkit-scrollbar {
    display: none;
  }

  .tabs-md[tabsHighlight="true"] .tab-highlight {
    background-color: #4FC3F7 !important;
  }

  .tab-badge {
    background-color: #FF4141 !important;
  }

  .loading-wrapper {
    background: transparent !important;
    position: relative !important;
    bottom: 10%;
  }

  ion-backdrop {
    opacity: 0.7 !important;
  }

  .custom-spinner-box {
    text-align: center;
  }

  .loading-wrapper {
    color: white !important;
  }

  .custom-spinner-font {
    color: white !important;
    font-size: 1.8rem;
    text-align: center;
    top: 0;
    position: relative;
  }
}

Answer 1

当使用ViewChild 监控更改时，您需要通过在 ion-slides 元素上添加对它的模板引用来连接您在 .ts 文件中声明的 slides 变量，如下所示：

<ion-slides pager="true" #slides>
// the slides
</ion-slides>

结帐The ViewChild Angular docs 了解更多信息。