Как связать объект в iframe src - PullRequest
Новая
       15

Как связать объект в iframe src

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

Я добавил iframe youtube в свой html-файл, но я хочу, чтобы он отображал исходный код на основе объекта из бэкэнда, а не записывал URL-адрес вручную, как показано ниже. У меня есть объект, который хранит ссылку из админ-панели, она называется item.youtube. он отлично работает, когда я вставляю его внутрь [href], как вы можете видеть ниже, но, конечно, не с iframe. Как я могу связать это правильно?

Вот мой html-код iframe внутри модала: 

<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="https://www.youtube.com/embed/RnNwo8aLJJ4?autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
  </div>
</div>

А вот мой список элементов с заголовком, описанием и т. Д., Включая класс заголовка, который имеет вышеупомянутый [href], который отлично работает: 

<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">
          <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" target="_blank">{{ item.title }}</a>
            <div class="description" [innerHTML]="item.description"></div>
          </div>
        </div>
      </div>
    </div>

  </section>
</div>

1 Ответ

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

проблема здесь в том, что iframe src защищены угловым и помечены как небезопасные. Вы можете создать трубу и использовать domsanitizer

как это 

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

@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}

затем добавьте свою трубу в модуль приложения 

@NgModule({
   declarations : [
     ...
     SafePipe
   ],
})

в html вы можете использовать это так 

<iframe width="100%" height="300" [src]="url | safe"></iframe>

Вы можете прочитать об этом здесь. как с помощью angular2 rc.6 отключить санитарную обработку при вставке HTML-тега, отображающего pdf

...