Question

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

这是我在modal内的iframe的html：

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

Answer 1

这里的问题是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>

您可以在这里阅读 how with angular2 rc.6 disable sanitize on embed html tag which display pdf

如何将对象绑定到iframe src

1 个答案: