Cómo cambiar el src de un iframe con un evento de clic desde otro componente en Angular 10.
Quiero cambiar la fuente de un iframe al hacer clic en la barra de menú. Mi barra de menú está en otro componente, en el que es posible cambiar el idioma en un menú desplegable. Quiero cambiar la fuente del iframe según el idioma que se haya seleccionado.
Aquí está mi menú HTML con una función llamada ‘updateSrc()’:
<nav>
<div class="select-box">
<div class="select-box__current" tabindex="1">
<div class="select-box__value" (click)="updateSrc(first_url)">
<input class="select-box__input" type="radio" id="0" value="1" name="Ben" checked="checked">
<p class="select-box__input-text">Es</p>
</div>
<div class="select-box__value" (click)="updateSrc(second_url)">
<input class="select-box__input" type="radio" id="1" value="2" name="Ben">
<p class="select-box__input-text">En</p>
</div>
<div class="select-box__value">
<input class="select-box__input" type="radio" id="2" value="3" name="Ben">
<p class="select-box__input-text">It</p>
</div>
<img class="select-box__icon" src="http://cdn.onlinewebfonts.com/svg/img295694.svg" alt="Arrow Icon" aria-hidden="true">
</div>
</div>
</nav>
Aquí está mi archivo TS:
import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeResourceUrl, SafeUrl } from '@angular/platform-browser';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
menu:boolean = false;
constructor(private translate: TranslateService,
private sanitizer: DomSanitizer)
{ }
ngOnInit(): void {
}
first_url = "https://www.youtube.com/embed/4oP20QZxahk";
second_url = "https://www.youtube.com/embed/QZPBqVF008";
current_url: SafeUrl;
updateSrc(url) {
this.current_url=this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}
Y también el iframe que quiero cambiar está en otro componente como dije antes:
<div class="center">
<iframe width="640" height="360" id="frame" frameborder="0" src="https://www.youtube.com/embed/4oP20QZxahk" [src]="current_url" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
<!--<div class="pairs">
<button md-button (click)="updateSrc(first_url)" id="first" class="top-link">Video en español</button>
<button md-button (click)="updateSrc(second_url)" id="second" class="top-link">Video in english</button>
</div> -->
</div>
Si todo estuviera en el mismo componente, funcionaría, pero el menú está en un componente y la etiqueta iframe en otro.
davy.ai
Para cambiar la fuente de iframe cuando se cambia el idioma en el menú desplegable, deberá pasar el valor del idioma seleccionado del componente del menú al componente donde se encuentra el iframe. Aquí le mostramos cómo hacerlo:
En el HTML del componente del menú, agregue un evento de clic a cada opción de idioma que pase el valor del idioma seleccionado a una función en el componente padre. Puede usar interpolación para pasar el valor del idioma como parámetro a la función:
En el componente padre, defina una variable para contener el valor del idioma seleccionado y una función para actualizar el valor del idioma y la URL del iframe en función del idioma seleccionado. Puede usar una estructura switch para establecer la URL correcta para cada idioma:
Finalmente, en el componente iframe, enlace el atributo src del iframe a la variable de iframeUrl del componente padre mediante enlace de propiedad:
Ahora, cuando se seleccione un idioma en el menú, se llamará a la función updateLanguage del componente padre con el valor del idioma seleccionado. La función actualizará la variable de idioma y establecerá la URL de iframe correcta según el idioma. El iframe en el componente hijo mostrará luego el contenido correcto según la URL actualizada.