Wie setze ich iframe src in Angular 2, ohne eine `unsafe value` Ausnahme zu verursachen?

Question

Ich bin neu in Angular 2 ohne AngularJS Erfahrung und arbeitet an einem Tutorial die Einstellung eines iframe src-Attribut beteiligt: ​​

<iframe width="100%" height="300" src="{{video.url}}"></iframe> 

Dies löst eine Ausnahme:

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

Ich habe bereits versucht, Bindungen mit mit [src] ohne Erfolg. Ich verpasse wahrscheinlich etwas und es fällt mir schwer, eine Lösung dafür zu finden.

Answer 1

aktualisieren

Für RC.6^ Version Verwendung DomSanitizer

Plunker

Und eine gute Option ist mit reinem Rohr für das:

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

Denken Sie daran, Ihre neue SafePipe an die declarations Array des AppModule hinzuzufügen. (as seen on documentation)

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

html

<iframe width="100%" height="300" [src]="url | safe"></iframe> 

Plunker

Wenn Sie embed Tag verwenden, dies könnte für Sie interessant sein:

• how with angular2 rc.6 disable sanitize on embed html tag which display pdf

---

Alte Version RC.5

Sie DomSanitizationService wie diese nutzen können:

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

und binden dann an url in Ihrer Vorlage:

<iframe width="100%" height="300" [src]="url"></iframe> 

Don vergebe nicht et folgende Einfuhren hinzuzufügen:

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

Plunker sample

Answer 2

Dieses funktioniert für mich.

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

Answer 3

Herzlichen Glückwunsch! ¨ ^^ Ich habe eine einfache & effiziente Lösung für Sie, ja!

<iframe width="100%" height="300" [attr.src]="video.url"></iframe 

[attr.src] instead of src "video.url" and not {{video.url}}

Große;)