在 angular material 模态中自动刷新 iframe src

Question

我是 Angular 9 和 angular material 的初学者。

我有组件，显示在 Material Modal 中。在该组件中，有一个 iframe 和从父组件传递的 iframe src 值。

问题是： 打开模式时，在一定时间后它会重置 iframe。所以在播放视频后，几秒钟后，自动暂停视频 00:00。所以当我再次演奏时，它会从头开始演奏。

下面是我的代码结构

Module.ts

 entryComponents: [VideoModalComponent,...]

视频-modal.component.ts

  import {Component, OnInit, Inject} from '@angular/core';
  import {MAT_DIALOG_DATA} from '@angular/material';
  import {DomSanitizer} from '@angular/platform-browser';

  @Component({
    selector: 'app-video-modal',
    templateUrl: './video-modal.component.html',
    styleUrls: ['./video-modal.component.scss']
  })
  export class VideoModalComponent implements OnInit {

    constructor(
      public domSanitizer: DomSanitizer,
      @Inject(MAT_DIALOG_DATA) public data: any
    ) {
    }

    ngOnInit() {
    }

  }

视频-modal.component.html

<iframe [width]="(data.videoWidth - 50)" [height]="data.videoHeight"
    [src]="domSanitizer.bypassSecurityTrustResourceUrl(data.videoUrl)" frameborder="0"
    allowfullscreen></iframe>

section.component.ts

openPromoModal(): void {
    this.dialog.open(VideoModalComponent, {
      width: this.videoWidth + 'px',
      data: {
        videoUrl: this.promotionalVideo.url,
        videoWidth: this.videoWidth,
        videoHeight: this.videoHeight
      },
    });
  }

Answer 1

根据我的评论展开，直接在模板中清理 URLs 并不是一个好主意。由于更改检测，它将被多次调用。

更好的方法是在控制器中对它们进行消毒，然后将消毒后的 URL 传递给 [src] 属性.

在 angular material 模态中自动刷新 iframe src

Automatically refreshing iframe src in angular material modal

youtube

modal-dialog

angular-material

angular