在 ngb-carousel 中嵌入 youtube iframe

Question

我正在尝试将 Iframe 嵌入到 ngb-carousel 中。轮播显示正常，iframe "tab" 不是：


        <ngb-carousel *ngIf="project.images">
          <ng-template class="item" ngbSlide *ngFor="let image of project.images">
            <img class="img-fluid" [src]="image" alt="">
          </ng-template>

          <ng-template class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="project.video"></iframe>
          </ng-template>
        </ngb-carousel>

编辑

堆栈闪电战：https://stackblitz.com/edit/angular-xcmhun

Answer 1

您缺少上面示例中第二个 ng-template 中的 ngbSlide 指令。我编辑了您的 stackblitz 示例，将该指令添加到该示例中的第三个 ng-template，嵌入的视频按预期显示在第三个选项卡上。

显示解决方案的分叉示例：https://angular-ztaxde.stackblitz.io

Answer 2

是的，请添加 ngbSlide:

        <ngb-carousel>
            <ng-template ngbSlide>
              <iframe width="500" height="315" src="https://www.youtube.com/embed/J2qDRJdTGow" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </ng-template>
          </ngb-carousel>

在 ngb-carousel 中嵌入 youtube iframe

embedding youtube iframe in ngb-carousel

html

iframe

carousel

ng-bootstrap

angular