angular - 如何在 IONIC 4 中播放 HTML 字符串中的视频

Question

我有来自 API 的 HTML 字符串和内部的 HTML 字符串，我正在将 youtube 视频放入<iFrame></iFrame>

我想将此视频与 HTML 一起显示。

export class BlogDetailsPage implements OnInit {
  detail = {};
  constructor(public domSanitizer: DomSanitizer, private ms: MasterService) { }

  ngOnInit() {
    var id = this.route.snapshot.params.id;
    this.ms.present();
    this.ms.getblogDetail(id).subscribe(res => {
      this.detail = this.domSanitizer.bypassSecurityTrustResourceUrl(res.content.rendered);
      console.log(this.detail);
      this.ms.dismiss();
    });
  }
}

在 HTML 中，我通过以下代码显示字符串

{{detail}}
<div class="blog-box" *ngIf="detail.content != undefined" [innerHTML]="detail">
</div>

输出

我无法显示 HTML 视频。

标签： angularionic4angular-dom-sanitizer

Answer 1

这是一种评论/猜测，但我需要格式和空间来解释。

我的意思是删除，{{detail}}因为我认为这会导致您的错误。

另外，现在我输入这个，似乎您正在使用两种不同的结构 -detail.content在 if 中，然后尝试detail在 innerHTML 中显示。

结合这两个想法，尝试改变：

{{detail}}
<div class="blog-box" *ngIf="detail.content != undefined" [innerHTML]="detail">
</div>

对此：

<div class="blog-box" *ngIf="detail.content != undefined" [innerHTML]="detail.content">
</div>