在Angular 2中遇到一些问题,我正在创建一个具有iframe的组件并从输入中设置源.但是当它加载时,它会两次点击onLoad,一个用src =”,另一个用实际的输入url.
我似乎无法弄清楚当它被放入视图时如何将ifl挂钩为iframe.
export class ExternalComponent implements OnInit {
@Input()
url: string;
private src: any;
constructor(private sanitizer: DomSanitizer) {
}
ngOnInit()
{
this.src = this.sanitizer.bypassSecurityTrustResourceUrl(this.url)
}
onLoad() {
}
}
HTML：
<iframe [src]="src" frameBorder="0" (load)="onLoad()"></iframe>
复制：http://plnkr.co/edit/Dnpmv6X2IO3WGQAg0372?p=preview
谢谢
解决方法
您可以尝试使用属性绑定,如果值为null,则根本不添加
<iframe [attr.src]="src ? src = null" frameBorder="0" (load)="onLoad()"></iframe>
更新
如https://stackoverflow.com/a/15880489/217408所述
当事件处理程序添加到< iframe>之前的元素时被添加到DOM中.这似乎是Angular正在做的事情.
在url为null时忽略事件
