角度10:使用变量

问题描述

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

错误:

从未设置任何源,

enter image description here

资源:这仅适用于Angular 1

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

解决方法

是的,将与Angular.js中相同的内容放入url仍然是不安全的。只需绕过它-它仍然是不安全的,但是您将承担责任而不是有角的开发人员。

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>

写为 constructor(public sanitizer: DomSanitizer) { } ngOnInit() { this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url); }

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

相关问答

依赖报错 idea导入项目后依赖报错,解决方案:https://blog....
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下...
错误1:gradle项目控制台输出为乱码 # 解决方案:https://bl...
错误还原:在查询的过程中,传入的workType为0时,该条件不起...
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct...