Angular 10: 设置 IFrame URL 输入变量

Question

我正在尝试使用以下组件设置 IFrame 源输入。

由于某种原因无法正常工作，没有显示网页。如何正确设置输入源？

调用方式：

<app-viewer-iframe-two
    [url1]="'http://www.food.com'"
    [url2]="'http://www.car.com'"
>
</app-viewer-iframe-two>

打字稿：

export class ViewerIframeTwoComponent implements OnInit {

  constructor() { }

  @Input() url1: string;
  @Input() url2: string;
  
  ngOnInit(): void {
  }
}

HTML:

<div class="box">
  <iframe class="iframe-one" src="{{url1}}" frameborder="0"
    scrolling="yes" align="left"> </iframe>
</div>

<div class="box">
  <iframe class="iframe-two" src="{{url1}}" frameborder="0"
    scrolling="yes" align="right"></iframe>
</div>

错误：

从未设置任何来源，

资源： 这仅适用于 Angular 1

How to set an iframe src attribute from a variable in AngularJS

Answer 1

是的，和Angular.js一样，把任何东西放到url中仍然是non-secure。绕过它 - 它仍然是 non-secure，但你将承担责任而不是 angular 开发人员。

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() {
    this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
  }

写成[src]="urlSafe"

https://angular.io/api/platform-browser/DomSanitizer

Angular 10: 设置 IFrame URL 输入变量

Angular 10: Set IFrame URL Input with Variable

iframe

typescript

angular

angular10