Al tener algunos problemas con Angular 2, estoy creando un componente que tiene un iframe y establece la fuente desde la entrada. Sin embargo, cuando se carga, presiona onLoad dos veces, una con src='' y otra con la URL de entrada real.
Parece que no puedo entender cómo conectar la URL para el iframe cuando se coloca en la vista.
export class ExternalComponent implements OnInit { @Input() url: string; private src: any; constructor(private sanitizer: DomSanitizer) { } ngOnInit() { this.src = this.sanitizer.bypassSecurityTrustResourceUrl(this.url) } onLoad() { } }HTML:
<iframe [src]="src" frameBorder="0" (load)="onLoad()"></iframe>Reproducción: http://plnkr.co/edit/Dnpmv6X2IO3WGQAg0372?p=preview
Gracias
Puede probar un enlace de atributo, que no se agrega en absoluto si el valor es null
<iframe [attr.src]="src ? src = null" frameBorder="0" (load)="onLoad()"></iframe>actualizar
Como se explica en https://stackoverflow.com/a/15880489/217408 cuando el controlador de eventos se agrega al elemento antes de agregar el <iframe> al DOM. Esto parece ser lo que está haciendo Angular.
Agregar controlador de eventos imperativamente después de agregar el elemento al DOM
Ignorar eventos mientras la url es nula
ngOnInit() { this.src = this.sanitizer.bypassSecurityTrustResourceUrl(this.url) } This is wrong code if use like this iframe will load more time . ts file ngOnInit() { this.src = this.url; } make html page like this (use pipe) <iframe [src]="src| safe" ></iframe> pipe file import { DomSanitizer} from '@angular/platform-browser'; constructor(private sanitizer:DomSanitizer){ return this.sanitizer.bypassSecurityTrustResourceUrl(value);Usando el depurador descubrí que event.target.src podría proporcionar la solución. La primera vez que se ejecuta, es una cadena vacía "" . La segunda vez que el valor es la URL de la imagen. Entonces, en mi caso funciona así:
onLoad(event: any) { if (event.target.src) { //do some stuff here } }