Angular 7 iframe历史后退按钮问题

Question

我正在使用 Angular 开发 SPA。当按下历史后退按钮时，浏览器仅更改 Youtube iframe 而不是整个页面，我需要按两次后退按钮才能进入完整的上一页（第一次 URL 未更新）。仅当遵循涉及 YT iframe 元素的同一路线的 2 个链接时，才会发生这种情况。我需要保留历史导航，所以我不能只删除历史元素

Component
export class PlayerComponent implements OnInit {
  videoName: string;
  videoUrl: any;

  constructor(
    private sanitizer: DomSanitizer,
    private route: ActivatedRoute
  ) {}

  ngOnInit() {
    this.route.params.subscribe( params => {
      this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/' + params.videoId);
    });
  }
}

HTML
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item border border-primary" *ngIf="videoUrl"
    [src] = "videoUrl"
    allowfullscreen>
  </iframe>
</div>

Answer 1

您不需要在订阅中设置“src”，您需要替换 url：

.ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

ngOnInit() {
    this.route.params.subscribe( params => {
        this.iframe.nativeElement.contentWindow.location.replace('https://www.youtube.com/embed/' + params.videoId);
    });
}

@ViewChild("iframe") iframe: ElementRef;

.html

  <iframe #iframe class="embed-responsive-item border border-primary" *ngIf="videoUrl"
    src="about:blank"
    allowfullscreen>
  </iframe>