如何将对象绑定到iframe src [英] How to bind object into iframe src

问题描述

我已经将youtube iframe添加到了我的html文件中，但是我希望它显示基于后端对象的源，而不是像下面手动编写该URL.我有一个对象，用于存储管理控制台中的链接，称为item.youtube.当我将其插入 [href] 中时，它可以完美地工作，如下所示，但肯定不会与iframe一起使用.如何正确绑定它?

I have added youtube iframe to my html file, but I want it to display the source based on the object from the backend instead of writing the url by hand like I have below. I have an object that stores the link from admin panel, it's called item.youtube. it works perfectly when I insert it inside [href] as you can see below, but certainly not with iframe. How can I bind it correctly?

这是我在modal内的iframe的html:

Here is my html of an iframe inside modal:

<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] 可以正常使用的标题类:

And here is my list of items with title, description etc. including title class that has above mentioned [href] that works perfectly:

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

推荐答案

此处的问题是iframe src受到了保护，并被标记为不安全.您可以创建管道并使用domsanitizer

the problem here is that iframe src's are protected in angular and marked as unsafe. you can create a pipe and use the 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);
  }
} 

然后将管道添加到应用模块

then add your pipe to the app module

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

在html中，您可以像这样使用它

in html you can use it like this

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

您可以在此处阅读有关内容如何使用angular2 rc.6禁用对显示pdf的嵌入html标签的清理

you can read about it here how with angular2 rc.6 disable sanitize on embed html tag which display pdf

这篇关于如何将对象绑定到iframe src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！