Angular2中的iframe

Question

從'@ angular/core'導入{Component};

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello {{name}}</h1> 
<iframe src="http://hssa:1021/Home?testRequestId=+[testRequestId]+" allowfullscreen></iframe>`, 
}) 
export class AppComponent { 
    name = 'Angular'; 
    testRequestId = '3224'; 

} 

我有我的.ts文件，如上所述。如何將testRequestId傳遞給html。

Answer 1

試試這個：

Online demo

安全管

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: string) { 
    return this.sanitizer.bypassSecurityTrustResourceUrl(url); 
    } 
} 

AppComponent

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <iframe [src]="'https://www.youtube.com/embed/' + testRequestId | safe" width="560" height="315" allowfullscreen></iframe> 
    ` 
}) 
export class AppComponent { 
    testRequestId: string = 'uelHwf8o7_U'; 

} 

因爲角不信任任何來源，它會清理內容，然後我們需要繞過它。

瞭解更多關於這個話題：https://angular.io/docs/ts/latest/guide/security.html

Template syntax

Answer 2

只要改變+[testRequestId]+到{{testRequestId}}。

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: `<h1>Hello {{name}}</h1> 
<iframe src="http://hssa:1021/Home?testRequestId={{testRequestId}}" allowfullscreen></iframe>`, 
}) 
export class AppComponent { 
    name = 'Angular'; 
    testRequestId = '3224'; 
}