Como definir iframe src em Angular 2 sem causar exceção de valor inseguro?

Eu sou novo no Angular 2 sem a experiência do AngularJS e trabalhando em um tutorial envolvendo a configuração de um atributo iframe src:

 

Isso lança uma exceção:

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

Eu já tentei usar ligações com [src] sem sucesso. Provavelmente estou sentindo falta de algo e tive dificuldade em encontrar uma solução para isso.

Atualizar

Para RC.6 ^ versão use DomSanitizer

Plunker

E uma boa opção é usar um tubo puro para isso:

 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); } } 

Lembre-se de adicionar seu novo SafePipe à matriz de declarations do AppModule. ( como visto na documentação )

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

html

  

Plunker

Se você usar a tag embed isso pode ser interessante para você:

  • como com o desarme angular2 rc.6 desinfete na tag html que exibe pdf

Versão antiga RC.5

Você pode aproveitar o DomSanitizationService assim:

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

E, em seguida, vincular ao url no seu modelo:

  

Não esqueça de adicionar as seguintes importações:

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

Amostra Plunker

Este aqui funciona para mim.

 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); } } 

Isso me ajuda a usar o 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

  

isso é tudo, pessoal!!!

 constructor( public sanitizer: DomSanitizer, ) { } 

Eu estava lutando por 4 horas. o problema estava em img tag. Quando você usa o colchete para ‘src’ ex: [src]. você não pode usar essa expressão angular {{}}. você acabou de dar diretamente de um exemplo de object abaixo. se você der uma expressão angular {{}}. você receberá um erro de interpolação.

  1. primeiro eu usei ngFor para iterar os países

     *ngFor="let country of countries" 
  2. segundo você coloca isso na tag img. é isso.

      

Parabéns! ¨ ^^ Eu tenho uma solução fácil e eficiente para você, sim!

  

[attr.src] em vez de src "video.url" e não {{video.url}}

Ótimo 😉