如何将对象绑定到 iframe src

Question

我已将 youtube iframe 添加到我的 html 文件中，但我希望它根据来自后端的对象显示源代码，而不是像下面那样手动编写 url。我有一个存储来自管理面板的链接的对象，它被称为 item.youtube。当我将它插入[href] 时，它可以完美运行，如下所示，但肯定不是 iframe。如何正确绑定？

这是我在模态框内的 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