MatDialog 和 Iframe 的问题答案

【问题标题】：Issue with MatDialog and IframeMatDialog 和 Iframe 的问题
【发布时间】：2018-03-19 11:23:27
【问题描述】：

我在使用 Angular 材质 MatDialog 和 Libcast 的 Iframe 时遇到了一些问题。当我更改窗口大小或将视频设置为全屏时，我遇到了不同的问题。在 Chrome 上：视频重新开始，我可以看到窗口正在刷新。在 Modzilla 上：当我打开全屏时视频崩溃并返回到非全屏页面。

我尝试使用开发工具直接在 MatDialog 中添加 iframe，我没有遇到任何问题，它运行良好。

  private openLibcastResource(resource: Resource) {
    this.dialog.open(VideoComponent, {
      data: {url: resource.sourceInfo.src},
    });
  }

@Component({
             selector: 'app-video',
             templateUrl: './video.component.html',
           })
export class VideoComponent implements OnInit {
  constructor(@Inject(MAT_DIALOG_DATA) public data: any,
              public dialogRef: MatDialogRef<VideoComponent>,
              private sanitizer: DomSanitizer) {
  }

  ngOnInit() {
  }

  public videoUrl() {
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.data.url);
  }
}

  &lt;iframe [src]="videoUrl()" class="libcast_player" width="560" height="450" frameborder="0" scrolling="no" allowfullscreen="allowfullscreen" style="opacity: 1; visibility: visible;"&gt;&lt;/iframe&gt;

您对正在发生的事情有任何想法吗？

【问题讨论】：

发布导致问题的代码，它将帮助人们更好地帮助您

标签： html angular iframe angular-material

【解决方案1】：

每次修改窗口大小时都会调用 getUrl()。所以视频被重置了，这就是为什么它在全屏时也崩溃了。

【讨论】：