Question

我正在尝试将iframe嵌入到ngb轮播中。轮播显示正常，iframe“标签”不是：


        <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>

修改

stackblitz：https://stackblitz.com/edit/angular-xcmhun

Answer 1

在上面的示例中，第二个ngbSlide中缺少了ng-template指令。我编辑了您的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

2 个答案: