¿Cómo establecer iframe src en Angular 2 sin causar la excepción de ‘valor inseguro’?

Soy nuevo en Angular 2 sin la experiencia de AngularJS y estoy trabajando en un tutorial que implica la configuración de un atributo ifrme src:

 

Esto arroja una excepción:

 Error: unsafe value used in a resource URL context at DomSanitizationServiceImpl.sanitize... 

Ya he intentado usar enlaces con [src] sin éxito. Probablemente me esté perdiendo algo y me haya costado encontrar una solución a esto.

Actualizar

Para la versión RC.6 ^ use DomSanitizer

Plunker

Y una buena opción es usar tubería pura para eso:

 import { Pipe, PipeTransform } from '@angular/core'; import { DomSanitizer} from '@angular/platform-browser'; @Pipe({ name: 'safe' }) export class SafePipe implements PipeTransform { constructor(private sanitizer: DomSanitizer) {} transform(url) { return this.sanitizer.bypassSecurityTrustResourceUrl(url); } } 

recuerde agregar su nuevo SafePipe a la matriz de declarations del AppModule. ( como se ve en la documentación )

 @NgModule({ declarations : [ ... SafePipe ], }) 

html

  

Plunker

Si usas la etiqueta de embed puede ser interesante para ti:

  • cómo con angular2 rc.6 desactivar desinfectar en la etiqueta embebida html que muestra pdf

Versión antigua RC.5

Puede aprovechar DomSanitizationService así:

 export class YourComponent { url: SafeResourceUrl; constructor(sanitizer: DomSanitizationService) { this.url = sanitizer.bypassSecurityTrustResourceUrl('your url'); } } 

Y luego enlazar a url en su plantilla:

  

No olvide agregar las siguientes importaciones:

 import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser'; 

Muestra de Plunker

Esta funciona para mí.

 import { Component,Input,OnInit} from '@angular/core'; import {DomSanitizer,SafeResourceUrl,} from '@angular/platform-browser'; @Component({ moduleId: module.id, selector: 'player', templateUrl: './player.component.html', styleUrls:['./player.component.scss'], }) export class PlayerComponent implements OnInit{ @Input() id:string; url: SafeResourceUrl; constructor (public sanitizer:DomSanitizer) { } ngOnInit() { this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.id); } } 

Esto me funciona a Angular 5.2.0

sarasa.Component.ts

 import { Component, OnInit, Input } from '@angular/core'; import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'; @Component({ selector: 'app-sarasa', templateUrl: './sarasa.component.html', styleUrls: ['./sarasa.component.scss'] }) export class Sarasa implements OnInit { @Input() url: string = "https://www.mmlpqtpkasjdashdjahd.com"; urlSafe: SafeResourceUrl; constructor(public sanitizer: DomSanitizer) { } ngOnInit() { this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url); } } 

sarasa.Component.html

  

¡¡¡eso es todo amigos!!!

 constructor( public sanitizer: DomSanitizer, ) { } 

Estuve luchando durante 4 horas. el problema estaba en la etiqueta img Cuando usa el corchete cuadrado para ‘src’ ex: [src]. no puedes usar esta expresión angular {{}}. simplemente da directamente de un ejemplo de objeto a continuación. si le das la expresión angular {{}}. obtendrás un error de interpolación

  1. primero usé ngFor para iterar los países

     *ngFor="let country of countries" 
  2. en segundo lugar pones esto en la etiqueta img. eso es todo.

      

¡Felicitaciones! ¨ ^^ ¡Tengo una solución fácil y eficiente para ti, sí!

  

[attr.src] en lugar de src "video.url" y no {{video.url}}

Excelente 😉