angular - 自动刷新 Angular Material 模态中的iframe src

Question

我是Angular 9和Angular Material 的初学者。

我有组件，该组件显示在“ Material 模态”中。在此组件中，有一个从父组件传递的iframe和iframe src值。

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

波纹管是我的代码结构

Module.ts

 entryComponents: [VideoModalComponent,...]

Video-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() {
    }

  }

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

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

更好的方法是在 Controller 中对其进行清理，并将经过清理的URL传递给[src]属性。