如何在 Angular 7 应用程序中使用 ngb-carousel？答案

【问题标题】：How to use ngb-carousel in Angular 7 app?如何在 Angular 7 应用程序中使用 ngb-carousel？
【发布时间】：2019-10-02 09:37:18
【问题描述】：

我正在尝试向我的 Angular 7 应用程序添加轮播。建议我不要使用 Bootstrap 4 轮播，而是使用 ng-bootstrap 轮播 - 发现 here

我运行了npm install --save @ng-bootstrap/ng-bootstrap，并添加了本文建议的代码。如下图：

    <ngb-carousel *ngIf="images">
        <ng-template ngbSlide>
            <img [src]="images[0]" alt="Random first slide">
            <div class="carousel-caption">
                <h3>First slide label</h3>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
        </ng-template>
        <ng-template ngbSlide>
            <img [src]="images[1]" alt="Random second slide">
            <div class="carousel-caption">
                <h3>Second slide label</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </ng-template>
        <ng-template ngbSlide>
            <img [src]="images[2]" alt="Random third slide">
            <div class="carousel-caption">
                <h3>Third slide label</h3>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
        </ng-template>
    </ngb-carousel>

TS：

    images = [1, 2, 3].map(() => https://picsum.photos/900/500?random&t=${Math.random()});

另外，我在import 中添加了app.module.ts：

    import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

    imports: [
        NgbModule
    ],

我使用 npm 安装了 bootstrap 并将其添加到我的 angular.json 文件的 styles 部分。

现在，下面的轮播出现了：

如您所见，文本未居中，图像上仅出现一个箭头。当我检查元素时，这是另一个箭头所在的位置：

如果我打开控制台，屏幕变小，两个箭头都会出现：

当屏幕变小时，箭头和文本似乎向左移动。有人可以指出如何正确显示它吗？谢谢！

【问题讨论】：

控制台有错误吗？
嗨@wentjun，不，控制台中没有出现错误。
你在@NgModule import 中导入了NgbModule 了吗？
在那种情况下，我认为那是你的 CSS。你是否真的包含了默认 boostrap 包中的样式？
好的，您缺少引导 css，我建议您通过 npm 安装并将其添加到 angular.json 中

标签： angular bootstrap-4 carousel ng-bootstrap

【解决方案1】：

您可能没有在 index.html 中添加 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

你应该end up with something like this。

【讨论】：

感谢您的回答，我通过 npm 安装了引导程序并将其添加到我的 angular.json 内的 styles 中，现在出现了轮播。但是，我在轮播上方的 HTML 显示不正确。仅显示左侧导航按钮并截断图像
你能分叉我的堆栈闪电战，做出可以重现你的问题的更改吗？
我已经这样做了，但仍然遇到同样的问题。控制台似乎将箭头和文本“推”到左侧
另外，当我像这样在浏览器中打开你的 stackblitz 时：here 发生了同样的问题。
图片上的 max-width:100% 会为您解决这个问题... stackBlitz 也随之更新。

【解决方案2】：

我遇到了同样的问题，我的解决方案可能并非在所有情况下都有效，但在我的情况下，所有图像都是方形的，所以我所做的是：

<ngb-carousel style="width: 350px; height: 350px; padding-left: 16px; padding-right: 16px">
        <ng-template ngbSlide>
                <img [src]="image_path" alt="Random first slide" style="width: 350px; height: 350px; ">
        </ng-template>
</ngb-carousel>

此代码使我的箭头指向正确的位置。为了让我的箭头更明显，我所做的是使用给定的 css 制作我的自定义箭头

.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')
}

【讨论】：