Quería crear un componente que manejara todos los videos incrustados de YouTube. Sin embargo, pasar el src como una variable no funcionará en absoluto. No importa lo que yo haga. ¿Alguien tiene una idea de cuál es el problema o es un error de angular que necesita ser reparado?

Tengo esto en una plantilla principal

 <ng-container *ngFor="let link of youtubeUrlList"> <app-youtube-card [url]="link"></app-youtube-card> </ng-container>

Y la plantilla del componente secundario es:

 <iframe [src]="safeSource"></iframe>

y en la clase de componente hijo:

 export class YoutubeCardComponent implements OnInit { @Input() url?: string safeSource?: SafeResourceUrl constructor(private sanitizer: DomSanitizer) { } ngOnInit(){ this.safeSource = this.sanitizer.bypassSecurityTrustResourceUrl(this.url) } }

y obtener este error

 core.js:6456 ERROR TypeError: t.replace is not a function at HTMLIFrameElement.set (<anonymous>:5:5482) at EmulatedEncapsulationDomRenderer2.setProperty (platform-browser.js:739) at elementPropertyInternal (core.js:10006) at Module.ɵɵproperty (core.js:14764) at YoutubeCardComponent_ng_container_1_Template (youtube-card.component.html:3) at executeTemplate (core.js:9579) at refreshView (core.js:9445) at refreshEmbeddedViews (core.js:10570) at refreshView (core.js:9469) at refreshComponent (core.js:10616)

Sin embargo, no obtengo ese error si coloco alguno de los enlaces de YouTube directamente en el atributo de origen del iframe