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

【问题标题】：ngb-carousel not loading properly on page refresh in an angular applicationngb-carousel 在角度应用程序中的页面刷新时无法正确加载
【发布时间】：2021-07-22 17:57:21
【问题描述】：

我在我的 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');
}

【问题讨论】：

标签： angular carousel ng-bootstrap

【解决方案1】：

如果您只想在所有图片加载完毕后显示轮播，您可以在变量中添加

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

【讨论】：