typescript - Angular 7 iframe historik bakåtknapp problem

Jag utvecklar en SPA med Angular. När historikens bakåtknapp trycks ändrar webbläsaren bara Youtube-iframe och inte hela sidan, jag måste trycka på bakåtknappen två gånger för att gå till den fullständiga föregående sidan (första gången uppdateras inte URL:en). Detta händer bara när man följer två länkar med samma rutt som involverar YT-iframe-elementet. Jag behöver behålla historiknavigeringen, så jag kan inte bara ta bort historikelementen.

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>

Svar #1

Du behöver inte ange "src" i prenumerationen, du behöver ersätta 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>

Svar #2

En lösning är att ersätta den nuvarande URL:en, på så sätt påverkas inte iframe av webbläsarens bakåtknapp.

HTML-mall:

<iframe #iframe></iframe>

TypeScript :

@ViewChild("iframe") iframe: ElementRef;

setUrl(url: string){
  this.iframe.nativeElement.contentWindow.location.replace(myUrl);
}

Relaterade artiklar