如何通过Angular中的按钮控制Ngb引导轮播幻灯片

Question

我有这样一个场景：

• 显示 Ngb Bootstrap 轮播并通过两个按钮控制幻灯片图像：上一个和下一个。
• 单击上一个按钮时显示上一张幻灯片图像，单击下一张按钮则显示下一张幻灯片图像。
• 很遗憾，我的代码不起作用。有人可以帮助我。以下是我的代码：

1. HTML 代码：

<div class="wrapper-md">
    <div class="modal-header">
        <h5 class="modal-title">TITLE HERE</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <ngb-carousel #carousel *ngIf="images" [showNavigationArrows]="false" [showNavigationIndicators]="false"  [keyboard]="false">
            <ng-template ngbSlide *ngFor="let image of images; index as i">
                <div class="picsum-img-wrapper">
                    <img [src]="image" alt="Guide image">
                </div>
                <div class="carousel-caption">
                    <h4>Slide {{i}}</h4>
                </div>
            </ng-template>
        </ngb-carousel>
    </div>
    <div class="row justify-content-center">
        <button type="button" class="btn btn-sm btn-primary m-r" *ngIf="!isNext" (click)="skip()">Skip</button>
        <button type="button" class="btn btn-sm btn-info m-r" *ngIf="isNext" (click)="previousStep()">Previous</button>
        <button type="button" class="btn btn-sm btn-success" (click)="nextStep()">Next</button>
    </div>
</div>

1. TypeScript 代码：

    images = [62, 83, 466, 965, 982, 1043, 738].map((n) => `https://picsum.photos/id/${n}/900/500`);

    @ViewChild('carousel', {static: true}) carousel: NgbCarousel;

    isPrevious: boolean = false;
    isNext: boolean = false;

    constructor(public modal: NgbActiveModal){

    }

    skip()
    {
        this.modal.close();
    }

    previousStep()
    {
        this.isPrevious = true;
        this.carousel.prev();
    }

    nextStep()
    {
        this.isNext = true;
        this.carousel.next();

    }

在我的情况下任何想法。 提前致谢！

Answer 1

移除 [showNavigationArrows]="false" 这个属性 解释---如果你使用 ngb-carousal 这个属性是假的，那么你的下一个和前事件默认情况下不起作用，它是真的 在 ngb-carouse 中你可以使用 next 和 pre 按钮

    <div class="wrapper-md">
    <div class="modal-header">
        <h5 class="modal-title">TITLE HERE</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="modal.dismiss('Cross click')">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="modal-body">
        <ngb-carousel #carousel *ngIf="images" [showNavigationIndicators]="false"  [keyboard]="false">
            <ng-template ngbSlide *ngFor="let image of images; index as i">
                <div class="picsum-img-wrapper">
                    <img [src]="image" alt="Guide image">
                </div>
                <div class="carousel-caption">
                    <h4>Slide {{i}}</h4>
                </div>
            </ng-template>
 <div class="row justify-content-center">
        <button type="button" class="btn btn-sm btn-primary m-r" *ngIf="!isNext" (click)="skip()">Skip</button>
        <button type="button" class="btn btn-sm btn-info m-r" *ngIf="isNext" (click)="previousStep()">Previous</button>
        <button type="button" class="btn btn-sm btn-success" (click)="nextStep()">Next</button>
    </div>
</div>
        </ngb-carousel>`
    </div>