Angular2中的iframe

发布时间：2020-12-17 06:52:38 所属栏目：安全来源：网络整理

导读：从’@ angular / core’导入{Component}; @Component({ selector: 'my-app',template: `h1Hello {{name}}/h1iframe src="http://hssa:1021/Home?testRequestId=+[testRequestId]+" allowfullscreen/iframe`,})export class AppComponent { name = 'Angular';

从’@ 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.

解决方法

试试这个：

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';

}

因为Angular不信任任何来源,它会对内容进行消毒,然后我们需要绕过它.

了解有关此主题的更多信息：https://angular.io/docs/ts/latest/guide/security.html

Template syntax

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!