javascript - Iframe laddas om vid hovring till andra komponenter t.ex.: verktygstips

Jag har använt iframe-taggen för att ladda en av URL:erna, men iframe-data laddas om varje gång jag hovrar över en annan komponent, t.ex.: tooltip, eller öppnar en dropdown. Det uppdaterar helt iframe.

HTML-kod:

<iframe scrolling="no" style="border-width:0px; overflow: hidden;" [src]=transform(mapUri)></iframe>

TS-filkod:

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

export class TestComponent implements OnInit {

mapUri = "https://sub.domain.com/";

constructor(private sanitizer: DomSanitizer) {}

transform(url:any) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
}

Svar #1

det verkar som att sättet du hanterade iframe src-saniteringen gjorde en av följande:

1. utlöste en rendering av iframe på nytt
2. återutlöste transformfunktionen och laddade därför om innehållet i din iframe

varje gång du hovrade över någon annan komponent på sidan.

Med pipe kommer detta oväntade beteende troligen att förhindras och även vid sanering tycker jag det är mer lämpligt att exportera funktionaliteten till en dedikerad pipe, så på det här sättet kommer du att kunna återanvända den i olika komponenter i din app och förhindra kodduplicering.

här är rörimplementeringen:

@Pipe({ name: 'safeUrl' })
export class SafeUrlPipe implements PipeTransform {
  constructor(private sanitizer: DomSanitizer) {}
  transform(url: string) {
      return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }
}