Невозможно правильно связать данные в iframe src - PullRequest
Новая
       10

Невозможно правильно связать данные в iframe src

0 голосов
/ 15 марта 2019

Я создал загрузочный модал с встроенным в него 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>

А вот труба domsanitizer YouTube: 

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);
  }
}
...