从’@ 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.
解决方法
试试这个：
安全管道
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';
}
因为Angular不信任任何来源,它会对内容进行消毒,然后我们需要绕过它.
了解有关此主题的更多信息：https://angular.io/docs/ts/latest/guide/security.html
