Angular 10：使用变量设置 IFrame URL 输入

Posted 2023-03-05

【中文标题】Angular 10：使用变量设置 IFrame URL 输入

【英文标题】：Angular 10: Set IFrame URL Input with Variable

【发布时间】：2020-12-03 19:09:19

【问题描述】：

我正在尝试使用下面的组件设置 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

【问题讨论】：

看看这个答案***.com/a/50863439/8198889

【参考方案1】：

是的，将任何内容放入与 Angular.js 中相同的 url 仍然是不安全的。绕过它 - 它仍然是不安全的，但你将承担责任而不是 Angular 开发人员。

  constructor(public sanitizer: DomSanitizer)  

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

写成[src]="urlSafe"

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

【讨论】：

我是否正确设置了输入、引号和括号？

尝试将随机字符串放入 src 时没关系 - 角度不允许这样做。 bypassSecurityTrustResourceUrl 返回 SafeResourceUrl，而不是字符串，所以不要插入它，而是像 [src]="urlSafe"