ngb-carousel 在角度应用程序中的页面刷新时未正确加载

如何解决ngb-carousel 在角度应用程序中的页面刷新时未正确加载

我在我的 Angular 应用程序中为一个简单的网站使用 ngb-carousel，一切正常，但每当我刷新时，carousel 的图像无法快速加载，而指示器和箭头已加载。

我想知道有什么解决方案吗？。我尝试设置一个最小高度，这样即使没有加载图像，它也至少看起来很美观。我将非常感谢任何建议或解决方案。我的与轮播相关的代码是这样的。

父组件：

<div style="min-height: 500px;">
  <banner-slider></banner-slider>
</div>

横幅滑块组件：

<ngb-carousel 
  [showNavigationArrows]="true" 
  [showNavigationIndicators]="true"
  interval="10000"
  [keyboard]="true"
  [pauSEOnHover]="true"
  [wrap]="true">
  <ng-template ngbSlide  *ngFor="let slide of sliderContent; let i = index" >
    <div class="picsum-img-wrapper">
      <img style="filter: brightness(0.5);" src="{{slide.image}}">
    </div>
    <div class="carousel-content text-left">
      <div class="my-2"> 
        <h5><strong>{{slide.content.title}}</strong></h5>
      </div>
      <div class="my-2 text-wrap" style="width: 45rem">
        <h2 style="font-size: 4rem;"><strong>{{slide.content.heading}}</strong></h2>
      </div>
      <div class="my-2 text-wrap" style="width: 45rem">
        <p>{{slide.content.short_description}}</p>
      </div>
      <div class="my-2 text-wrap">
       <a  [href]="slide.button.url"><button class="btn btn-secondary">{{slide.button.text}}</button></a> 
      </div>
    </div>
  </ng-template>
</ngb-carousel>

这是我用来做一些修改的一些css：

.carousel-content {
  position: absolute;
  bottom: 50%;
  left: 15%;
  z-index: 20;
  color: white;
}

.carousel-indicators li {
  width : 20px!important;
  height: 20px !important;
  border-radius: 50% !important
}

.carousel-indicators li {
  width : 20px!important;
  background-color: black;
  height: 20px !important;
  border-radius: 50% !important
}

.carousel-indicators .active {
  width : 20px!important;
  background-color: yellow;
  height: 20px !important;
  border-radius: 50% !important
}

.carousel-control-prev-icon{
  background-image: url('https://apufpel.com.br/assets/img/seta_prim.png');
}
.carousel-control-next-icon{
  background-image: url('https://apufpel.com.br/assets/img/seta_ult.png');
}

解决方法

如果您只想在所有图像加载后才显示轮播，您可以在变量中设置

imagesLoaded:number=0

然后，您的图像可以像

<img style="filter: brightness(0.5);" [src]="slide.image" 
   (load)="imagesLoaded=imagesLoaded+1">

您可以将旋转木马包含在 div 中

<div [style.display]="imagesLoaded<sliderContent.length?'none':null>
   ..here your carousel..
</div>

注意不要使用 *ngIf else display:none