Oi, Jonathas! Como vai?
O problema que você está enfrentando deve estar relacionado ao Angular interpretando mal a variável {{ pensamento.youtube }} dentro da tag <iframe>. O Angular pode estar sanitizando a URL, e a removendo por segurança, o que pode fazer a página ficar em branco.
Para solucionar, vamos usar um serviço do Angular chamado DomSanitizer, que permite marcar uma URL como segura antes de usá-la no iframe.
Siga estes passos para corrigir o problema:
- Importe e injete o
DomSanitizer no seu componente:
import { Component } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
@Component({
selector: 'app-seu-componente',
templateUrl: './seu-componente.component.html',
styleUrls: ['./seu-componente.component.css']
})
export class SeuComponente {
videoUrl!: SafeResourceUrl;
constructor(private sanitizer: DomSanitizer) {}
ngOnInit() {
const urlDoBanco = 'https://www.youtube.com/embed/seu_video_id'; // Exemplo
this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(urlDoBanco);
}
}
2️. Agora, no HTML, use a variável segura dentro do iframe:
O que esse código faz?
- O
DomSanitizer converte a URL vinda do backend em uma URL segura. - O
bypassSecurityTrustResourceUrl(url) informa ao Angular que a URL pode ser usada dentro do iframe sem riscos. - Isso evita que a página fique em branco por conta da sanitização automática do Angular.
Caso queira aprender mais sobre o DomSanitizer, recomendo que faça a leitura de sua documentação.
Espero ter ajudado. Conte com o apoio do Fórum na sua jornada. Fico à disposição :)
Abraços e bons estudos!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado
