Question

我创建了一个带有youtube iframe的引导程序模式。另外，我还有一份新闻列表，其中包含自己的图片，标题和正文。这样的想法是，每当我单击特定的新闻图片时，都应显示带有iframe的上述模式。每个新闻文章都有自己的item.youtube，其中带有youtube链接，因此当我们打开模式时应显示特定的视频。我尝试这样做，但是似乎有一个问题：即使单击其他新闻文章图片，也只会显示一个视频，仅第一篇的youtube视频（item.youtube）

我认为问题与iframe有关，因为纯a class [href] = "item.youtube | youtube"可以100％正常工作，并将每篇文章标题都连接到其自己的链接（item.youtube），如下所示。

我应该怎么解决这个问题？

这是我的HTML：

<div class="paragraph-items" *ngFor="let section of page">

  <section class="news">


    <div class="news-items-wrapper">
      <div class="news-wrapper" *ngFor="let item of section.items">
        <div class="news-item-wrapper">
            <div class="modal" id="myModal">
                <div class="modal-dialog">
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                    <div class="modal-content">
                      <iframe width="560" height="315" [src]="item.youtube | youtube" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
          <a class="thumb" data-toggle="modal" data-target="#myModal" href="#"
             [ngStyle]="{'background-image': 'url(' + item.thumbnail + ')'}">
          </a>
          <div class="info">
            <a class="title" [href]="item.youtube | youtube" target="_blank">{{ item.title }}</a>
            <div class="description mt-3" [innerHTML]="item.description"></div>
          </div>
        </div>
      </div>
    </div>

  </section>
</div>

这是youtube domsanitizer管道：

import { Pipe, PipeTransform, Injectable } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({
  name: 'youtube'
})
@Injectable()
export class YoutubePipe implements PipeTransform {

  constructor(private dom: DomSanitizer){

  }

  transform(value) {
    value = 'https://www.youtube.com/embed/' + value;
    return this.dom.bypassSecurityTrustResourceUrl(value);
  }
}

无法将数据正确绑定到iframe src

0 个答案: