时间戳

首页 > 解决方案 > 使用 Angular-Bootstrap Carousel 时出现白色幻灯片

angular - 使用 Angular-Bootstrap Carousel 时出现白色幻灯片

问题描述

这是我第一次在 Angular 中使用 Bootstrap 的轮播元素，我遇到了一个奇怪的问题，即每次转换之前都会出现白色幻灯片（参见下面的 gif）。我按照 ng-bootstrap Github 页面上的所有基本步骤进行设置，但找不到问题。以下是相关文件：

当前问题的 Gif： https ://ibb.co/p38LP4X

主页.html

...
<ngb-carousel *ngIf="images" [interval]="5000" [pauseOnHover]="pauseOnHover" [pauseOnFocus]="pauseOnFocus">
        <ng-template ngbSlide *ngFor="let img of images; index as i">
            <div class="carousel-caption">
                <h1>AS SOLID AS THEY COME</h1>
            </div>
            <div class="img-wrapper">
                <img [src]="img" alt="My image {{i + 1}} description">
            </div>
        </ng-template>
    </ngb-carousel>
...

角.json

...
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
...

我还在 index.html 中包含了另一个引导程序版本，因为仅使用 angular.json 中的引导程序版本根本无法使轮播功能发挥作用。

索引.html

<head>
...
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
...
</head>

标签： angulartypescript

解决方案

我遇到了同样的问题，从位置 ../node_modules/@angular/compiler-cli/ngcc/ ngcc_lock_file删除ngcc_lock_file文件对我有用。

推荐阅读