使用 Typescript 暂停和恢复 bootstrap 4 轮播答案

【问题标题】：Pause and resume bootstrap 4 carousel using Typescript使用 Typescript 暂停和恢复 bootstrap 4 轮播
【发布时间】：2018-02-05 21:31:52
【问题描述】：

我正在使用 bootstrap 4 beta 编写一个 Angular 4 应用程序，我想在用户单击图像时停止轮播，因为会出现一个模式。一旦模态关闭，它就可以恢复轮播。我发现，当我加载轮播时，如果我更改任何属性都没有关系，它不会绑定到新设置。我的 HTML 是：

<div #carousel id="carouselControls" class="carousel slide" data-ride="carousel" [attr.data-interval]="interval">
        <div class="carousel-inner" role="listbox">
            <div *ngFor="let image of images, let i = index" class="carousel-item" [ngClass]="{'active' : i == 0}">
                <img data-toggle="modal" data-target="#imageModal" (click)="zoom(image)" [src]="image">
            </div>
        </div>
        <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev">
            <span class="fa fa-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next">
            <span class="fa fa-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

我将组件的 interval 字段从 5000 切换为 false（布尔值 false），我可以看到，当我调试它时，轮播似乎不接受它。那么我的问题是：我如何使用 Typescript 切换它 - 假设这是要走的路？

【问题讨论】：

标签： angular typescript twitter-bootstrap-4

【解决方案1】：

看来您正在使用基于 JS / JQuery 的 Bootstrap 版本。这样做可能是可行的，但该库并不是为使用 Angular 的绑定机制而设计的。

您可以考虑使用 ngx-bootstrap，它是 Bootstrap 库的一个版本，旨在与 Angular 互操作，并且确实使用了 Angular 的绑定机制。

【讨论】：